bootstrap学习笔记-第2章 排版

bootstrap学习笔记-第2章 排版

更好排版：https://www.zybuluo.com/phper/note/80418

在慕课网上学习。这里就随便记一下：

第2章 排版

标题

bootstrap用了<h1>~<h6>标签分别标题6个大小的标题：

  
  
  
  

   
   
   
   
<h1>Bootstrap标题一</h1>
   
   
   
   
<h2>Bootstrap标题二</h2>
   
   
   
   
<h3>Bootstrap标题三</h3>
   
   
   
   
<h4>Bootstrap标题四</h4>
   
   
   
   
<h5>Bootstrap标题五</h5>
   
   
   
   
<h6>Bootstrap标题六</h6>
  
  
  
  

同时，bootstrap也使用 div class="h1~h6"和上面的h1~h6一模一样的显示效果：

  
  
  
  

   
   
   
   
<div class="h1">Bootstrap标题一</div>
   
   
   
   
<div class="h2">Bootstrap标题二</div>
   
   
   
   
<div class="h3">Bootstrap标题三</div>
   
   
   
   
<div class="h4">Bootstrap标题四</div>
   
   
   
   
<div class="h5">Bootstrap标题五</div>
   
   
   
   
<div class="h6">Bootstrap标题六</div>
  
  
  
  

副标题

bootstrap里也设定了副标题<small>的用法，嵌套到<h1>~<h6>里面，<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；同时颜色被设置为灰色（#999）

  
  
  
  

   
   
   
   
<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>
  
  
  
  

段落

用<p>标签来标记一个段落，字号为14px(font-size)，行高为1.42857143（line-height），为深灰色（#333），字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）：

  
  
  
  

   
   
   
   
<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
  
  
  
  

强调段落

可以在<p>标签上加一个class = .lead,就会字体比之前大了一点：

  
  
  
  

   
   
   
   
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
  
  
  
  

粗体

粗体用<b>或者<strong>标签来表示，相当于用了font-weight: bold;

  
  
  
  

   
   
   
   
<p>这是一段话<b>我是粗体</b></p>
   
   
   
   
<p>这是一段话<strong>我是粗体</strong></p>
   
   
   
   

   
   
   
   
<b>强调</b>
   
   
   
   
<strong>Bootstrap</strong>
  
  
  
  

斜体

在Bootstrap中可以通过使用标签<em>或<i>来实现斜体，相当于font-style:italic;

  
  
  
  

   
   
   
   
<p>我正在学习<em>Bootstrap</em>。我发现<i>Bootstrap</i>真的好强大。</p>
  
  
  
  

强调相关的类

bootstrap 中有专门来强调字体颜色的class属性。

有如下：

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

  
  
  
  

   
   
   
   
<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>
   
   
   
   
<p class="text-danger">我是一段危险信息，请用Bootstrap框架中的危险风格显示</p>
  
  
  
  

效果为：

.text-muted 效果

.text-primary效果

.text-success效果

.text-info效果

.text-warning效果

.text-danger效果

我是一段危险信息，请用Bootstrap框架中的危险风格显示

文本对齐风格

css中一般用text-align来对齐，bootstrap抽象了几个class来简化：

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

  
  
  
  

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

效果如下：

我居左

我居中

我居右

我两端对齐

列表-无序列表、有序列表

bootstrap里无序列表和有序列表也同样是用<ul><li>和<ol><li>，只不过对原生的做了若干改动：

所以我们写无序列表：

  
  
  
  

   
   
   
   
<h5>无序列表</h5>
   
   
   
   
<ul>
   
   
   
   
 <li>列表项目</li>
   
   
   
   
 <li>列表项目</li>
   
   
   
   
 <li>列表项目</li>
   
   
   
   
 <li>列表项目</li>
   
   
   
   
 <li>列表项目</li>
   
   
   
   
</ul>
  
  
  
  

效果如下图：

• 列表项目
• 列表项目
• 列表项目
• 列表项目
• 列表项目

有序列表：

  
  
  
  

   
   
   
   
<ol>
   
   
   
   
 <li>d1</li>
   
   
   
   
 <li>d2</li>
   
   
   
   
 <li>d3</li>
   
   
   
   
</ol>
  
  
  
  

效果是下面：

1. d1
2. d2
3. d3

列表--去点列表

上面都是传统的列表，在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,如果我们不想要那个黑点或者数字。可以加.list-unstyled, 相当于加了padding-left: 0;list-style: none;样式。

  
  
  
  

   
   
   
   
<ul class="list-unstyled">
   
   
   
   
 <li>不带黑点</li>
   
   
   
   
 <li>不带黑点</li>
   
   
   
   
</ul>
   
   
   
   
<ol class="list-unstyled">
   
   
   
   
 <li>不带数字</li>
   
   
   
   
 <li>不带数字</li>
   
   
   
   
</ol>
  
  
  
  

演示如下：

• 不带黑点
• 不带黑点

1. 不带数字
2. 不带数字

列表-内联列表

内联列表就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。通常用来做水平导航条。添加类名.list-inline来实现内联列表:

  
  
  
  

   
   
   
   
<ul class="list-inline">
   
   
   
   
 <li>个人中心</li>
   
   
   
   
 <li>我的相册</li>
   
   
   
   
 <li>我的说说</li>
   
   
   
   
 <li>我的日志</li>
   
   
   
   
</ul>
  
  
  
  

效果像下面这样： 
个人中心   我的相册   我的说说   我的日志

列表-定义列表

在css中我们用<dl><dt><dd>来定义一个定义列表, 在bootstrap中任然是用这个3个：

  
  
  
  

   
   
   
   
<dl>
   
   
   
   
 <dt>W3cplus</dt>
   
   
   
   
 <dd>一个致力于推广国内前端行业的技术博客</dd>
   
   
   
   
 <dt>慕课网</dt>
   
   
   
   
 <dd>一个真心在做教育的网站</dd>
   
   
   
   
</dl>
  
  
  
  

效果：

W3cplus

一个致力于推广国内前端行业的技术博客

慕课网

一个真心在做教育的网站

我们可以再<dl>上加上<dl class="dl-horizontal">这样，当屏幕尺寸大于768px的时候，<dt>和<dd>就水平显示在一行了。

  
  
  
  

   
   
   
   
<dl class="dl-horizontal">
   
   
   
   
 <dt>W3cplus</dt>
   
   
   
   
 <dd style="margin-left: 0";>一个致力于推广国内前端行业的技术博客</dd>
   
   
   
   
 <dt>慕课网</dt>
   
   
   
   
 <dd style="margin-left: 0";>一个真心在做教育的网站</dd>
   
   
   
   
</dl>
  
  
  
  

代码

我们再bootstrap里写代码时候，是可以特殊标记出来，就像markdown一样，不过bootstrap里更强大：

1、使用<code></code>来显示单行内联代码 
2、使用<pre></pre>来显示多行块代码 
3、使用<kbd></kbd>来显示用户输入代码

其中，<code></code>类似于markdown里的 `` , 只不过颜色是粉红色的 :

  
  
  
  

   
   
   
   
<code>php</code>
  
  
  
  

php

而 <kbd></kbd>也类似于markdown里的 `` ，只不过颜色是黑色背景，白色字体:

  
  
  
  

   
   
   
   
<kbd>ctrl+c</kbd>
  
  
  
  

ctrl+c

<pre></pre>来显示多行块代码,和markdown的回车+4个空格效果一样：

  
  
  
  

   
   
   
   
<pre>
   
   
   
   
echo 2344;
   
   
   
   
var_dump(1234);
   
   
   
   
</pre>
  
  
  
  

效果：

echo 2344;
var_dump(1234);

我们可以在<pre>上加一个pre--scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

  
  
  
  

   
   
   
   
<pre class="pre-scrollable">
   
   
   
   
 echo 2344;
   
   
   
   
 var_dump(1234);
   
   
   
   
</pre>
  
  
  
  

表格-基础表格

表格也是平时用的居多的，bootstrap中的基础表格就是只要加个.tableclass就可以了,所以它也是最简单的基础表格，但是bootstrap还是对它进行了优化，也是蛮舒适的看起来。

  
  
  
  

   
   
   
   
<table class="table">
   
   
   
   
 <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>
   
   
   
   
 </tbody>
   
   
   
   
 </table>
  
  
  
  

.table主要有三个作用：给表格设置了margin-bottom:20px以及设置单元内距，在thead底部设置了一个2px的浅灰实线，每个单元格顶部设置了一个1px的浅灰实线。效果如图，无边框：

表格--斑马线表格

斑马线就是在表格上，隔行的颜色不一样，这样立体感更强。bootstrap实现很简单，只需要在原先的.table的基础上加上.table-striped就可以了。

  
  
  
  

   
   
   
   
<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>
   
   
   
   
 </tbody>
   
   
   
   
 </table>
  
  
  
  

效果如图： 

表格--带边框的表格

默认的表格外围和里面是不带边框的，要想加边框也巨简单，在原先的.table的基础上加上.table-bordered就可以了。

  
  
  
  

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

效果如图，是带有边框的。 

表格--鼠标悬浮高亮的表格

当我们鼠标经过一行表格的时候，这一行就会变成高亮显示。也很简单。在原先的.table的基础上加上.table-hover就可以了。

  
  
  
  

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

效果如图，鼠标经过后，这一行高亮显示： 

表格--紧凑型表格

上面的所有表格，他们行之间的间隔都很大。bootstrap还提供了一种比较紧凑型的。在原先的.table的基础上加上.table-condensed。加上后，明显紧凑了很多。

  
  
  
  

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

效果如图：行与行之间的间隙小了一圈 

对比一下，原先的： 

表格--响应式表格

随着移动互联网的发展，越来越多的网站在手机上使用。所以。表格也需要根据屏幕来自适应变大变小。bootstrap中有个样式.table-responsive就起作用了。它能自动识别窗口的大小来自动伸缩表格大小。

但是，注意的时，它不是加上<table>上，而是必须在外面套一层div,加到div上：

  
  
  
  

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

宽屏下，显示： 
 
小屏幕下是这样的：