Bootstrap_02_全局CSS之排版、代码、表格

最新推荐文章于 2024-11-14 20:44:39 发布

I小菜鸡

最新推荐文章于 2024-11-14 20:44:39 发布

阅读量1.1k

点赞数 22

文章标签： bootstrap css html

本文链接：https://blog.youkuaiyun.com/m0_60837612/article/details/124518511

版权

本文详细介绍了Bootstrap的全局CSS样式，包括排版中的标题、内联文本元素、对齐方式和大小写转换；代码展示，如内联代码、用户输入和代码块；以及表格的多种样式，如基本表格、条纹状表格和响应式表格。通过实例展示了各种类的使用方法，帮助理解Bootstrap的CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.8.2.右对齐样式引用:
（靠右对齐）

1.9.列表

1.9.1.有序列表：
同HTML

1.9.2.无序列表：
同HTML

1.9.3.无样式列表：
,去掉li前面的点

1.9.4内联列表：
，li显示在一行

1.9.5.描述列表：
horizontal:水平

2.代码

2.1.内联代码：通过标签包裹内联样式的代码片段

2.2.用户输入：通过标签标记用户通过键盘输入的内容

2.3.基本代码块：多行代码可以使用
标签
2.4.设置pre区域显示垂直滚动条：
3.表格

3.1.基本表格：

        3.2.条纹状表格：

        3.3.鼠标悬停：

        3.4.紧缩表格：

        3.6.状态类

                3.6.1.class=”active”:鼠标悬停在行或者单元格上时设置的颜色

        3.7.响应式表格：
,给包括 的元素添加class=”table-responsive”

1.排版

1.1.页面主体

Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333，我们可以通过在页面按F12查看body的样式。

段落突出：通过.lead类可以让段落突出显示：代码如下
<p>略略略</p>普通段落
<p class="lead">略略略</p>段落突出显示
效果图如下：

不难看出突出显示的“略略略”字体更大

1.2.标题

1.标题h1--h6和html中的效果一样

2.副标题：在<h1><small>副标题</small></h1>

在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样

3.样式：class=”h1”...class=”h6”在Bootstrap中h1- h6可以作为class的样式效果和直接写h1-h6的标题标签效果一样

代码如下：
1》<h1>666</h1> --普通标题标签
2》<h1>
	    静夜思   --普通标题标签
		<small>李白</small> --副标签
   </h1>
3》<p class="h1">666</p> --用class样式从大到小
   <p class="h2">666</p>
   <p class="h3">666</p>
   <p class="h4">666</p>
   <p class="h5">666</p>
   <p class="h6">666</p>
效果图如下：

1.3.内联文本元素

1.3.1.标记：class="mark"

标记，把指定的内容标记出来。示例如下:
<p class="mark">略略略</p>
1.3.2.线条：删除线、下划线
1》：<del>小肖</del>或者<s>小李</s> --删除线
2》：<ins>小陈</ins>或者<u>小向</u> --下划线
1.3.3.强调文本：小字体、文本加粗、文本倾斜
1》<small>小罗</small> --小字体
2》<em>小罗</em> --文本倾斜
3》<strong><em>小陈</strong></em> --文本加粗、加倾斜

1.4.对齐

1.4.1.居左：class=”text-left”
<p class="text-left">人生</p>
1.4.2.居中：class=”text-center”
<p class="text-center">就像打电话</p>
1.4.3.居右：class=”text-right”
<p class="text-right">不是你先gua</p>
注意：span标签无效

1.5.改变大小写

1.5.1.大写：class=”text-uppercase”
<span class="text-uppercase"> 就是我先gua</span><br />
1.5.2.小写：class=”text-lowercase”
<span class="text-lowercase"> 就是我先gua</span><br />
1.5.3.首字母大写：class=”text-capitalize”
<span class="text-capitalize">就是我先gua</span><br />

1.6.缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容

1.6.1.基本缩略语：<abbr title=”完整内容”>
<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>
1.6.2.首字母缩略语：<abbr title=”完整内容” class=”initialism”>
<abbr title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页
注意：这两种的区别在于首字母缩略语的字体是基本缩略语字体的90%大小

1.7.地址

1.7.1.地址：<address>（会自动调整间距）
<address>家庭地址：浪琴湾</address>
<address>公司地址：梅溪湖</address>

1.8.引用：类似名言名句的格式

1.8.1.默认样式的引用：<blockquote> <footer>
<blockquote>成长比成功更重要<footer>村花</footer></blockquote>
1.8.2.右对齐样式引用:<blockquote class=”blockquote-reverse”>（靠右对齐）
<blockquote class="blockquote-reverse">成长比成功更重要<footer><cite>村花</cite></footer></blockquote>

1.9.列表

1.9.1.有序列表：<ol><li> 同HTML

1.9.2.无序列表：<ul><li> 同HTML

1.9.3.无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
<ul class="list-unstyled">
    <li>床前明月光</li>
	<li>疑是地上霜</li>
	<li>举头望明月</li>
	<li>低头思故乡</li>
</ul>
1.9.4内联列表：<ul class=”list-inline”>，li显示在一行
<ul class="list-inline">
	<li>月既不解饮</li>
	<li>影徒随我身</li>
	<li>暂伴月将影，行乐须及春</li>
</ul>
1.9.5.描述列表：<dl class=”dl-horizontal”> horizontal:水平
<dl class="dl-horizontal">
    <dt>首页</dt>
	    <dd>这是首页的信息</dd>
	<dt>OPPO</dt>
	    <dd>OPPO Find X5</dd>
</dl>

2.代码

2.1.内联代码：通过<code>标签包裹内联样式的代码片段

花间一壶酒，独酌无相亲。<code>举杯邀明月，</code>对影成三人。

2.2.用户输入：通过<kbd>标签标记用户通过键盘输入的内容

<kbd>什么？我不李姐</kbd>

2.3.基本代码块：多行代码可以使用<pre>标签

<pre>
		床前明月光，疑是地上霜。
		举头望明月，低头思故乡。
</pre>
注意：pre标签内的内容所有的空格都会原样显示，标签内的文本编辑格式，会按照原样显示

2.4.设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

<pre class="pre-scrollable">
    床前明月光
	疑是地上霜
	举头望明月
	低头思故乡
</pre>

3.表格

3.1.基本表格：<table class=”table”>

现在的表格是没有任何样式，没有边框没有对齐方式的

                   <table class=”table”>
						<tr>
							<td>编号</td>
							<td>姓名</td>
							<td>性别</td>
							<td>年龄</td>
						</tr>
							<tr>
								<td>1</td>
								<td>张三</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>2</td>
								<td>李四</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>3</td>
								<td>王二</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>4</td>
								<td>麻子</td>
								<td>男</td>
								<td>18</td>
							</tr>
					</table>
					
					<table>

现在再看效果，自动铺满，对齐，标题加粗，添加分割线

3.2.条纹状表格：<table class=”table table-striped”>

			     <table class="table table-striped">
			    	        <tr>
							    <td>编号</td>
							    <td>姓名</td>
							    <td>性别</td>
							    <td>年龄</td>
				            </tr>
							<tr>
								<td>1</td>
								<td>张三</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>2</td>
								<td>李四</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>3</td>
								<td>王二</td>
								<td>男</td>
								<td>18</td>
							</tr>
							<tr>
								<td>4</td>
								<td>麻子</td>
								<td>男</td>
								<td>18</td>
							</tr>
				</table>

隔行就有背景色

3.3.鼠标悬停：<table class=”table table-hover”>

				        <table class="table table-hover">
					            <tr>
								    <td>编号</td>
								    <td>姓名</td>
								    <td>性别</td>
								    <td>年龄</td>
					            </tr>
								<tr>
									<td>1</td>
									<td>张三</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>2</td>
									<td>李四</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>3</td>
									<td>王二</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>4</td>
									<td>麻子</td>
									<td>男</td>
									<td>18</td>
								</tr>
					    </table>

我鼠标放在了编号为二的哪一行上面，可以看到哪一行微微变灰了，这就是鼠标悬停

3.4.紧缩表格：<table class=”table-condensed”>

				<table class="table table-condensed">
					<tr>
								<td>编号</td>
								<td>姓名</td>
								<td>性别</td>
								<td>年龄</td>
					</tr>
								<tr>
									<td>1</td>
									<td>张三</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>2</td>
									<td>李四</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>3</td>
									<td>王二</td>
									<td>男</td>
									<td>18</td>
								</tr>
								<tr>
									<td>4</td>
									<td>麻子</td>
									<td>男</td>
									<td>18</td>
								</tr>
					</table>

顾名思义紧缩表格，就是表格相对来说缩紧一些，仔细看行的上下两条线是不是缩紧了

3.6.状态类

3.6.1.class=”active”:鼠标悬停在行或者单元格上时设置的颜色

			<table class="table table-hover"> 
				<tr class="active"> --鼠标悬停在行或者单元格上时设置的颜色 灰色
					<td>1</td>
					<td>张三</td>
					<td>男</td>
					<td>18</td>
				</tr>
				<tr class="success"> --表示成功或积极的动作 绿色
					<td>2</td>
					<td>李四</td>
					<td>男</td>
					<td>18</td>
				</tr>
				<tr class="info"> --表示普通的提示信息或动作 蓝色
					<td>3</td>
					<td>王二</td>
					<td>男</td>
					<td>18</td>
				</tr>
				<tr class="warning"> --表示警告或需要用户注意 黄色
					<td>4</td>
					<td>麻子</td>
					<td>男</td>
					<td>18</td>
				</tr>
				<tr class="danger"> --表示危险或潜在的带来负面影响的动作 红色
					<td>5</td>
					<td>老六</td>
					<td>男</td>
					<td>18</td>
				</tr>
			</table>

上两组图片对比一波

我把鼠标放在了编号为4的那一列，变化不是很明显，但是也可以看出它的背景色比上一张的要深

3.7.响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”

			<table class="table table-hover">
					<tr class="table table-responsive">
						<td>1</td>
						<td>张三</td>
						<td>男</td>
						<td>18</td>
					</tr>
					<tr class="table table-responsive">
						<td>2</td>
						<td>李四</td>
						<td>男</td>
						<td>18</td>
					</tr>
					<tr class="table table-responsive">
						<td>3</td>
						<td>王二</td>
						<td>男</td>
						<td>18</td>
					</tr>
					<tr class="table table-responsive">
						<td>4</td>
						<td>麻子</td>
						<td>男</td>
						<td>18</td>
					</tr>
			</table>

继续上两组图片对比一波