需灵活掌握的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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
多种方式实现js图片预览
Dec 12 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
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
PHP中的正规表达式(一)
2006/10/09 PHP
php Smarty 字符比较代码
2011/02/27 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
一起深入理解js中的事件对象
2021/02/06 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python: 传递列表副本方式
2019/12/19 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
普天C++笔试题
2016/03/20 面试题
党的群众路线教育实践方案
2014/05/11 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
实习介绍信模板
2015/01/30 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js