[关闭]
@phper 2015-04-01T02:44:34.000000Z 字数 5337 阅读 5605

bootstrap学习笔记-第2章 排版

bootstrap

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

第2章 排版

标题

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

  1. <h1>Bootstrap标题一</h1>
  2. <h2>Bootstrap标题二</h2>
  3. <h3>Bootstrap标题三</h3>
  4. <h4>Bootstrap标题四</h4>
  5. <h5>Bootstrap标题五</h5>
  6. <h6>Bootstrap标题六</h6>

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

  1. <div class="h1">Bootstrap标题一</div>
  2. <div class="h2">Bootstrap标题二</div>
  3. <div class="h3">Bootstrap标题三</div>
  4. <div class="h4">Bootstrap标题四</div>
  5. <div class="h5">Bootstrap标题五</div>
  6. <div class="h6">Bootstrap标题六</div>

副标题

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

  1. <h1>Bootstrap标题一<small>我是副标题</small></h1>
  2. <h2>Bootstrap标题二<small>我是副标题</small></h2>
  3. <h3>Bootstrap标题三<small>我是副标题</small></h3>
  4. <h4>Bootstrap标题四<small>我是副标题</small></h4>
  5. <h5>Bootstrap标题五<small>我是副标题</small></h5>
  6. <h6>Bootstrap标题六<small>我是副标题</small></h6>

段落

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

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

强调段落

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

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

粗体

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

  1. <p>这是一段话<b>我是粗体</b></p>
  2. <p>这是一段话<strong>我是粗体</strong></p>
  4. <b>强调</b>
  5. <strong>Bootstrap</strong>

斜体

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

  1. <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）

  1. <div class="text-muted">.text-muted 效果</div>
  2. <div class="text-primary">.text-primary效果</div>
  3. <div class="text-success">.text-success效果</div>
  4. <div class="text-info">.text-info效果</div>
  5. <div class="text-warning">.text-warning效果</div>
  6. <div class="text-danger">.text-danger效果</div>
  7. <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：两端对齐

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

效果如下：

我居左

我居中

我居右

我两端对齐

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

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

所以我们写无序列表：

  1. <h5>无序列表</h5>
  2. <ul>
  3.     <li>列表项目</li>
  4.     <li>列表项目</li>
  5.     <li>列表项目</li>
  6.     <li>列表项目</li>
  7.     <li>列表项目</li>
  8. </ul>

效果如下图：

有序列表：

  1. <ol>
  2.     <li>d1</li>
  3.     <li>d2</li>
  4.     <li>d3</li>
  5. </ol>

效果是下面：

  1. d1
  2. d2
  3. d3

列表--去点列表

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

  1. <ul class="list-unstyled">
  2.     <li>不带黑点</li>
  3.     <li>不带黑点</li>
  4. </ul>
  5. <ol class="list-unstyled">
  6.     <li>不带数字</li>
  7.     <li>不带数字</li>
  8. </ol>

演示如下：

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

列表-内联列表

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

  1. <ul class="list-inline">
  2.     <li>个人中心</li>
  3.     <li>我的相册</li>
  4.     <li>我的说说</li>
  5.     <li>我的日志</li>
  6. </ul>

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

列表-定义列表

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

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

效果：

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

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

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

代码

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

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

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

  1. <code>php</code>

php

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

  1. <kbd>ctrl+c</kbd>

ctrl+c

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

  1. <pre>
  2. echo 2344;
  3. var_dump(1234);
  4. </pre>

效果：

echo 2344;
var_dump(1234);

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

  1. <pre class="pre-scrollable">
  2.     echo 2344;
  3.     var_dump(1234);
  4. </pre>

表格-基础表格

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

  1. <table class="table">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.    </tbody>
  21.  </table>

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

表格--斑马线表格

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

  1. <table class="table table-striped">
  2.    <thead>
  3.      <tr>
  4.        <th>表格标题</th>
  5.        <th>表格标题</th>
  6.        <th>表格标题</th>
  7.      </tr>
  8.    </thead>
  9.    <tbody>
  10.      <tr>
  11.        <td>表格单元格</td>
  12.        <td>表格单元格</td>
  13.        <td>表格单元格</td>
  14.      </tr>
  15.      <tr>
  16.        <td>表格单元格</td>
  17.        <td>表格单元格</td>
  18.        <td>表格单元格</td>
  19.      </tr>
  20.      <tr>
  21.        <td>表格单元格</td>
  22.        <td>表格单元格</td>
  23.        <td>表格单元格</td>
  24.      </tr>
  25.    </tbody>
  26.  </table>

效果如图：

表格--带边框的表格

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

  1. <table  class="table table-bordered">
  2.   …
  3. </table>

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

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

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

  1. <table  class="table table-hover">
  2.   …
  3. </table>

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

表格--紧凑型表格

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

  1. <table  class="table table-condensed">
  2.   …
  3. </table>

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

对比一下，原先的：

表格--响应式表格

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

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

  1. <div class="table-responsive">
  2.     <table class="table table-bordered">
  3.      …
  4.     </table>
  5. </div>

宽屏下，显示：

小屏幕下是这样的：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注