需灵活掌握的Bootstrap预定义排版类 你精通吗?


Posted in Javascript onJune 20, 2016

有了Bootstrap前端框架预处理好的排版类,我们从此不必再为每个排版的标签元素写大量的CSS代码了,可以使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素预定义好的样式,排版出很规范的网页。

那我们接下来一起学习下,bootstrap前端框架到底为我们预定义了那些排版的类呢? 

第一:Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈,这些字体都是目前所有网页最经常用的字体了。从此我们不必再为body定义全局样式的字体样式了。只要用了Bootstrap前端框架font-family默认使用了上面的字体系列了。
即:font-family:sans-serif;
我们来验证下吧,打开bootstrap前端的框架CSS文件bootstrap.css

 需灵活掌握的Bootstrap预定义排版类 你精通吗?

各位小伙伴会想,我们只可以用bootstrap前端框架默认的字体吗?显然不是的,后面我会教你如何定制bootstrap框架,打造我们自己喜欢,想要效果的bootstrap框架。 

第二:bootstrap前端框架预定义了h1-h6的CSS样式,我从bootstrap前端的框架CSS文件bootstrap.css中把定义的样式抽取了一部分出来,可以看到分别为hn定义了font-size的属性值。
 h1 {font-size: 36px;}
 h2 {font-size: 30px;}
 h3 {font-size: 24px;}
 h4 {font-size: 18px;}
 h5 {font-size: 14px;}
 h6 {font-size: 12px;}
 实际效果如下:
 网页代码:

 需灵活掌握的Bootstrap预定义排版类 你精通吗?

 网页效果:

需灵活掌握的Bootstrap预定义排版类 你精通吗?

第三:内联子标题,如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示: 

网页代码:

 需灵活掌握的Bootstrap预定义排版类 你精通吗?

网页效果:

 需灵活掌握的Bootstrap预定义排版类 你精通吗?

第四:引导主体副本,为了给段落添加强调文本,则可以添加 class=”lead”,这将得到更大更粗、行高更高的文本,如下面实例所示: 

网页代码:

 需灵活掌握的Bootstrap预定义排版类 你精通吗?

网页效果:

需灵活掌握的Bootstrap预定义排版类 你精通吗?

以下bootstrap前端框架类不再举例,我只写出用途,因为可以跟上面的例子一样去试验小效果。 

第五:强调,HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)。

第六:缩写,HTML元素提供了用于缩写的标记,比如WWW或HTTP。Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为<abbr>title属性添加了文本)。为了得到一个更小字体的文本,请添加.initialism到<abbr>。 

第七:地址(Address),使用<address>标签,您可以在网页上显示联系信息。由于<address>默认为display:block;,您需要使用标签来为封闭的地址文本添加换行。 

第八:引用(Blockquote),您可以在任意的HTML文本旁使用默认的<blockquote>。其他选项包括,添加一个<small>标签来标识引用的来源,使用class.pull-right向右对齐引用。下面的实例演示了这些特性:

第九:列表
Bootstrap支持有序列表、无序列表和定义列表。
 有序列表:有序列表是指以数字或其他有序字符开头的列表。
 无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用class.list-unstyled来移除样式。您也可以通过使用class.list-inline把所有的列表项放在同一行中。
 定义列表:在这种类型的列表中,每个列表项可以包含<dt>和<dd>元素。<dt>代表定义术语,就像字典,这是被定义的属于(或短语)。接着,<dd>是<dt>的描述。您可以使用classdl-horizontal把<dl>行中的属于与描述并排显示。
 其他更多bootstrap前端框架类需要非常精通的如下,大家必须熟记和熟练去使用。

 .lead 使段落突出显示
 .small 设定小文本(设置为父文本的85%大小)
 .text-left 设定文本左对齐
 .text-center 设定文本居中对齐
 .text-right 设定文本右对齐
 .text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
 .text-nowrap 段落中超出屏幕部分不换行
 .text-lowercase 设定文本小写
 .text-uppercase 设定文本大写
 .text-capitalize设定单词首字母大写
 .initialism 显示在<abbr>元素中的文本以小号字体展示
 .blockquote-reverse设定引用右对齐
 .list-unstyled 移除默认的列表样式,列表项中左对齐(<ul>和<ol>中)。这个类仅适用于直接子列表项(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
 .list-inline 将所有列表项放置同一行
 .dl-horizontal 该类设置了浮动和偏移,应用于<dl>元素和<dt>元素中,具体实现可以查看实例
 .pre-scrollable 使<pre>元素可滚动scrollable

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Javascript中的arguments对象
Jun 20 #Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 #Javascript
BootStrap selectpicker
Jun 20 #Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 #Javascript
You might like
laravel5实现微信第三方登录功能
2018/12/06 PHP
php实现的顺序线性表示例
2019/05/04 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
python根据出生日期获得年龄的方法
2015/03/31 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python中的global关键字的使用方法
2019/08/20 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python实现快递价格查询系统
2020/03/03 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
简历里的自我评价
2014/01/31 职场文书
医学生个人求职信范文
2014/02/07 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
基督教婚礼主持词
2014/03/14 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
MongoDB支持的数据类型
2022/04/11 MongoDB