【技术分享】Bootstrap之CSS篇(3)

本篇我们来学习Bootstrap 排版、代码、表格。

本篇主要介绍Bootstrap的排版、代码、表格的定义与使用，掌握如何快速的利用Bootstrap定义好的样式快速进行排版以及如何应用“表格类”快速完成表格的设计。

排版

在日常的页面设计中，我们肯定是需要对文字进行排版的，Bootstrap中需要适配屏幕所以对于文本排版也做了处理，在不同的终端访问页面时，会根据终端屏幕来改变文字版面以达到最佳的阅读效果，所以我们需要了解它的排版标签的使用，并尽量使用官方建议的标签来对文字排版布局。

常用标签

标题类

• <h1></h1> ~ <h6></h6> 一级~六级标题

文本强调

• <small> 或 class="small" 副标题

• <strong> 粗体

• <em> 斜体

• <address> 地址

• <abbr> 文本底部虚线边框

• <blockquote> 引用

• .initialism 缩写

• .lead 强调

文本方向

• .text-left 文本左对齐

• text-right 文本右对齐

• .text-center 文本居中

文本特效

• .text-info 适合展示普通信息

• .text-warning 适合展示警告信息

• .text-success 适合展示成功信息

• .text-primary 适合展示重要信息

列表

• 有序列表 <ol><li></li></ol>

• 无序列表 <ul><li></li></ul>

• 自定义列表

• 自定义 <dl>"><dt>title 1</dt><dd>item1</dd></dl>

• 无样式 <ul class="list-unstyled"><li></li></ul>

• 内联式 <ul class="list-inline"><li></li></ul>

• 水平式 <ul class="dl-horizontal"><li></li></ul>

范文排版示例

这些都属于html的基础标签，就不逐一展示效果了，但在文本的排版中常用的也就是标题、副标题、正文，文本效果排版（居中、居左、居右）效果设置。其实Bootstrap已经帮我们设计好常用的CSS样式了，我们直接引用就可以，以下文排版为例。

<div class="container">
    <h1 class="text-center">文化项目策划书</h1>
    <p class="small text-right">鲁迅《复仇》</p>

    <h2 class="">文华项目策划书（一）</h2>
    <h3>一、目录</h3>
    <ol class="lead">
        <li>前言</li>
        <li>涉及文章</li>
        <li>文化内涵挖掘</li>
    </ol>
    <h3>二、前言</h3>
    <p class="lead">&emsp;绍兴是个好地方，就近现代文人而言，最出名的莫过于鲁迅先生啦！而且绍兴自古 是富饶之地。绍兴历史悠久，名人辈出，景色秀丽，物产丰富，是我国历史文化名城之一，相传4000多年前的夏朝，大禹为治水曾两次躬临绍兴，治平了水土，故至今尚存禹陵胜迹，“悠悠鉴湖水，浓浓古越情”，绍兴以其人文景观丰富，自古即为游客向往的浏览胜地。本产供销，我们重点介绍沈园，它位于绍兴市区示南的洋河弄，宋代池台极盛，为着名园林，据载：南宋诗人陆游初娶表妹唐婉，夫妻恩爱，却为陆母所不喜，陆游被迫与唐婉分离，后来唐婉改嫁赵士程，陆游再娶王氏，十看后，他们春游沈园相遇，陆游伤感之余，在园壁题了着名的《钗头凤》词，唐婉见了不胜伤感，也和词一首，不久便忧郁而死，让我们一同走进沈园吧！    </p>
    <h3>三、涉及文章</h3>
    <p class="lead">&emsp;鲁迅《复仇》    </p>
    <h3>四、文化内涵挖掘</h3>
    <p class="lead">&emsp;鲁迅，浙江绍兴人，《复仇》之所以如此歌咏复仇，其内在的意涵不尽在于鼓吹向看客们“复仇”或者更将看作是一种“疗救”，在本篇中，精巧的精思，象征性的人物，细腻而尖的描写，复沓而有力的语句，铸成了强烈的感觉和思想的冲击力，这样，一位着家，那么童年也定会不同寻常，因此，让我们一同走进他的故里——绍兴，他儿时的地方。    </p>

    <address class="lead text-right">2020.9.7</address></div>

• 以上范文的排版 用到了<h>标签进行分级，我比较喜欢.lead的文本效果它比<p>标签默认效果相比无论是大小还是字体都更适合用于正文的展示。

• 对于文本排版方面，普通文text-center、text-right、text-left这个三个大家从名称上就知道是居中、居右、居右。Bootstrap已经帮我们写好很多效果段落标签中默认就是垂直居中效果。

• 以前还需要我们通过line-height: 100px;和text-align: center;，现在只需要引入一个文本排列类就完成了，是不是比以前已经少写很多代码。

代码

有两种标签可以将代码通过页面展示出来

• <code></code> 代码显示（内联）

• <pre></pre> 代码显示（块级）

<div class="container">
    <p class=""lead">2、代码</p>
    <code>
        new Vue({
            el:'#id',
            date:{
                first:'hello world!!!';
            }
        })
    </code>

    <pre>
        new Vue({
            el:'#id',
            date:{
                first:'hello world!!!';
            }
        })
    </pre>
</div>

• 通过对比 我们可以发现和markdown中的`` ``和``` ```有类似的效果，就我个人来说，更习惯使用<pre>标签来显示代码。

表格

• Bootstrap中为我们定义了许多实用的表格样式

表格元素

• <table></table> 基础表格标签

• <thead></thead> 标题容器,其中存放<tr>、<td>

• <tbody></tbody> 行容器，其中存放<tr>、<td>

• <tr></tr> 行标签

• <td></td> 列标签，单元格

• <th></th> 定义首行或列的标签，只能在<thead>内使用

• <caption></caption> 表格描述标签

colspan="" 跨列合并单元格
rowspan="" 跨行合并单元格

表格类

• .table 基本样式(横向分隔线)

• .table-striped 斑马线样式

• .table-bordered 边框效果

• .table-hover 悬停效果

• .table-condensed 紧凑表格样式

表格辅助类

这些辅助类建议使用在<th>、<tr>、<td>上，这些和我们在“排版”介绍的'text-sucess'的效果基本类似。

• .active 悬停效果

• .success 展示成功效果

• .info 展示信息效果

• .warning 展示警告效果

• .danger 展示危险效果

表格实例

现在我们来创建一个表格，将咱们上面介绍的表格类和辅助类来个“大杂汇”全部效果都应用一下

<div class="container">
    <p class=""lead">3、表格</p>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <caption>caption 此表格将展示所有的效果</caption>
        <thead>
            <tr>
                <th>thead th 特殊列名1</th>
                <td>thead td 普通列名2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>tbody td1</td>
                <td>tbody td2</td>
            </tr>
            <tr>
                <td>tbody td3</td>
                <td>tbody td4</td>
            </tr>
            <tr>
                <td>tbody td5</td>
                <td>tbody td6</td>
            </tr>
            <tr>
                <td class="text-center" colspan="2">单元格效果展示</td>
            </tr>
            <tr>
                <td class="active text-center" colspan="2">active效果</td>
            </tr>
            <tr>
                <td class="success text-center" colspan="2" >success效果</td>
            </tr>
            <tr>
                <td class="info text-center" colspan="2" >info效果</td>
            </tr>
            <tr>
                <td class="warning text-center" colspan="2" >warning效果</td>
            </tr>
            <tr>
                <td class="danger text-center" colspan="2" >danger效果</td>
            </tr>
        </tbody>
    </table></div>

通过以上表格实例，我们进行一下简单总结

• <table class="table table-striped table-bordered table-hover table-condensed">我们只需要通过对<table>标签应用“表格类”样式，就可以立即获得我们曾经需要写很多CSS代码才能实现的特效。

• <td class="active text-center">“辅助类”样式的使用我们的表格具备更多的适应性，让我们可以根据自己的需要来突出内容。这也是开篇中Bootstrap的最初设计时的目标之一。其实我们可以跟据自己的需要来定义表格展示效果。Bootstrap只是建议我们按照“辅助类”样式的字面量来使用，但并非强制性的你可以自由去使用它们。（比如用warning效果来展示普通信息，info效果来做为表格的列名）

对于缺少艺术细胞的我来说，Bootstrap设计的这些样式已经基本能满足我的使用需求了，当然这也只是咱们学习Bootstrap开篇中的很小的一个章节，后续还会继续更新。

Bootstrap相关资源文件，已上传至我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/Bootstrap

书山有路勤为径，学海无涯苦作舟!!!

zhoubo

2020.9.7 at home