欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Bootstrap学习笔记——排版

程序员文章站 2022-07-14 21:33:30
...

以下内容的开始均是

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>%name%</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>

</body>
</html>

1 主标题

Bootstrap中的标题和HTML中的一样，只是重新定义并覆盖了原来的默认样式。

<body>
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

</body>

优化重置的项目主要有：

1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

2 副标题

副标题的实现主要通过<small>标签来实现的。
具体实例如下：

<body>

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>

</body>

实现效果
Bootstrap学习笔记——排版

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
详细代码请参阅bootstrap.css文件中第407行~第443行。

3 文本段落

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。

/源码请查看bootstrap.css文件中第274行~280行/

另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）：
/源码请查看bootstrap.css文件中第467行~469行/

此略

4 文本强调（字体大小变化）

对于一个段落p突出显示，则通过添加类名.lead实现，字号加粗增大，行高及margin也相应进行了改变。
具体实现方式

<p>Bootstrap学习笔记</p>
<p class="lead">Bootstrap学习笔记</p>

除此之外，Bootstrap还通过元素标签: 缩小<small> </small>、粗体<strong> </strong>、斜体<em> </em> <i> </i>和<cite>给文本做突出样式处理。

/源码查看bootstrap.css文件第481行~第484行/

small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/
}

/源码查看bootstrap.css文件第55行~第58行/

b,strong {
  font-weight: bold; /*文本加粗*/
}

/源码查看bootstrap.css第485行~第487行/

cite {
font-style: normal;
}

5 文本强调（字体颜色变化）

在4中的.lead是通过字体大小变化来强调内容的，也可以通过类实现字体的颜色变化来强调。

  • .text-muted：提示，使用浅灰色（#999）
  • .text-primary：主要，使用蓝色（#428bca）
  • .text-success：成功，使用浅绿色(#3c763d)
  • .text-info：通知信息，使用浅蓝色（#31708f）
  • .text-warning：警告，使用黄色（#8a6d3b）
  • .text-danger：危险，使用褐色（#a94442）
<body>
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
</body>

实现效果
Bootstrap学习笔记——排版

6 文本对齐方式

在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

  • 左对齐，取值left
  • 居中对齐，取值center
  • 右对齐，取值right
  • 两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

  • .text-left：左对齐
  • .text-center：居中对齐
  • .text-right：右对齐
  • .text-justify：两端对齐

具体实例如下：

<body>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>
</body>

7 列表

在HTML文档主要有三种：有序列表、无序列表和定义列表三种列表结构。
具体使用的标签说明如下：
无序列表

<ul>
    <li>…</li>
</ul>

有序列表

<ol>
    <li>…</li>
</ol>

定义列表

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表

7.1 无序、有序列表

Bootstrap仅仅在HTML的基础上做了些许优化，并无太多的改动。无序列表也成为普通列表。

<body>
<h5>普通列表</h5>
<ul>
    <li>列表项目</li>
    <li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
      <li>项目列表一</li>
      <li>项目列表二</li>

</ol>
<h5>有序列表嵌套</h5>
<ol>
    <li>有序列表</li>
    <li>
    有序列表
        <ol>
        <li>有序列表(2)</li>
        <li>有序列表(2)</li>
        </ol>
    </li>
    <li>有序列表</li>
</ol>
</body>

实现效果：
Bootstrap学习笔记——排版

7.2 列表去点

在项目列表中增加类：.list-unstyled，就可以将 无序和有序列表前面的项目符号去掉。

<ul class="list-unstyled"> </ul>
    <li> </li>

<ul ></ul>
    <li class="list-unstyled"></li> 

<ol class="list-unstyled"> </ol>
    <li></li>

<ol > </ol>
    <li class="list-unstyled"></li>

7.3 内联列表

通过添加类名“.list-inline”来实现把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
也可以说内联列表就是为制作水平导航而生。

<body>
<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>
</body>

实现效果如下：
Bootstrap学习笔记——排版

7.4 定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<body>
<dl>
    <dt>Bootstrap学习笔记</dt>
    <dd>为自己搭建一个小网站，努力成为全栈小能手</dd>
</dl>
</body>

实现效果：
Bootstrap学习笔记——排版

7.5 水平定义列表

水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

<body>
<dl class="dl-horizontal">
    <dt>Bootstrap学习笔记</dt>
    <dd>为自己搭建一个小网站，努力成为全栈小能手为自己搭建一个小网站，努力成为全栈小能为自己搭建一个小网站，努力成为全栈小能</dd>
    <dt>Bootstrap学习笔记</dt>
    <dd>为自己搭建一个小网站，努力成为全栈小能手为自己搭建一个小网站，努力成为全栈小能为自己搭建一个小网站，努力成为全栈小能</dd>
</dl>
</body>

实现效果：
Bootstrap学习笔记——排版

8 代码

主要用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

<body>
code风格：
<div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>
pre风格：
<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>
kbd风格：
<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
</body>

实现效果：
Bootstrap学习笔记——排版

注：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。建议在编写HTML标签时，就控制好，例如查看右侧代码编辑器上的15-19行。

<pre>元素显示大块代码使得输出内容占据页面较多的篇幅，为了控制代码块的大小，可以在pre标签上添加类名“.pre-scrollable”，来控制代码块区域的大小（设置高度一般为340px），超出该高度时则Y轴出现滚动条。

/源码请查看bootstrap.css第731行~第734行/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

友情提示：如果您了解LESS或Sass这样的CSS预定定义处理器，你完全可以通过code.less或者_code.scss文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。

8 表格

Bootstrap为表格提供了

  • 1种基础样式
  • 4种附加样式
  • 1个支持响应式的表格

也即：

  • .table：基础表格
  • .table-striped：斑马线表格
  • .table-bordered：带边框的表格
  • .table-hover：鼠标悬停高亮的表格
  • .table-condensed：紧凑型表格
  • .table-responsive：响应式表格

通过添加类名来实现所需要的表格效果

8.1 表格行的类

Bootstrap还为表格的行元素<tr>提供了五种不同的类名以控制行的不同背景颜色。
Bootstrap学习笔记——排版

其实这个和文本中的五条字体颜色变化是一致的。

<body>
<!-- 可以和表格的类匹配使用，例如<table class="table-hover"> -->
<table class="table table-hover">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table> 
</body>

实现效果：
Bootstrap学习笔记——排版

我们发现在表格<table>标签中增加类.table-hover(鼠标悬浮高亮)后当鼠标在移动通过行时，行的颜色加深，——悬浮状态！

8.2 基础表格

通过类名“.table”来控制基础表格样式。
如果在<table>元素中不添加任何类名，表格是无任何样式效果的。

<table class="table">
…
</table>

“.table”主要有三个作用：

  • 给表格设置了margin-bottom:20px以及设置单元内距
  • 在thead底部设置了一个2px的浅灰实线
  • 每个单元格顶部设置了一个1px的浅灰实线

8.2 斑马线表格

斑马线表格——就是让表格带有背景条纹效果(在tbody隔行有一个浅灰色的背景色)。
在<table class="table">的基础上增加类名“.table-striped”即可。

<table class="table table-striped">
…
</table>

其原理利用CSS3的结构性选择器“:nth-child”来实现，所以对于IE8以及其以下浏览器，没有背景条纹效果。

源码请查看bootstrap.css文件第1465行~第1468行：

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}

代码演示：

<body>
 <table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
</body>

Bootstrap学习笔记——排版

8.3 带边框的表格

基础表格仅让表格部分地方有边框，但有时候需要整个表格具有边框效果（单元格具有一条1px的边框）。
在基础表格<table class="table">基础上添加类名“.table-bordered”即可。

<table  class="table table-bordered">
  …
</table>

其源码可以查看bootstrap.css文件第1450行~第1464行：

.table-bordered {
  border: 1px solid #ddd;/*整个表格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd; /*每个单元格设置边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;/*表头底部边框*/
}

代码演示略

8.4 鼠标悬浮高亮的表格

采用类名“.table-hover”类名来实现表格的鼠标悬停高亮。
在<table class="table">元素上添加类名“table-hover”即可。

<table class="table table-hover">
…
</table>

从效果图中可以看出，当你鼠标悬浮在某一单元格上时，单元格所在行的背景色都会变成浅灰色。

鼠标悬浮高亮的效果主要是通过“hover”事件来实现，设置了“tr:hover”时的th、td的背景色为新颜色。
其源码请查看bootstrap.css文件中第1469行~第1472行：

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}

注：其实，鼠标悬浮高亮表格，可以和Bootstrap其他表格混合使用。简单点说，只要你想让你的表格具备悬浮高亮效果，你只要给这个表格添加“table-hover”类名就好了。例如，将前面介绍的几种表格结合使用：

<table class="table table-striped table-bordered table-hover">
…
</table>

8.5 紧凑型表格

紧凑型表格就是单元格没内距或者内距较其他表格的内距更小。也即重置表格单元格的内距padding的值。
类名“table-condensed”重置了单元格内距值。在

基础上添加类名“table-condensed”。

<table class="table table-condensed">
…
</table>

8.6 响应式表格

响应式表格可以让Web页面适合千罗万像的设备浏览。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

另外从上面的示例中大家可能也发现了，不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的<table>元素中一定不能缺少类名“table”。

http://www.imooc.com/code/2310

上一篇： Bootstrap学习笔记 04 - 排版

下一篇： Unity iOS混合开发

推荐阅读