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

举报
Zhoubo 发表于 2020/09/07 23:00:23 2020/09/07
【摘要】 本篇主要介绍Bootstrap的排版、代码、表格的定义与使用,掌握如何快速的利用Bootstrap定义好的样式快速进行排版以及如何应用“表格类”快速完成表格的设计。

本篇我们来学习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-centertext-righttext-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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。