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

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>
  3. <b>强调</b>
  4. <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. </table>

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

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

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

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

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

表格--紧凑型表格

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

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

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

对比一下,原先的:

表格--响应式表格

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

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

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

宽屏下,显示:

小屏幕下是这样的:

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