需灵活掌握的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 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
屏蔽script注入小例子
Nov 12 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
详解vue v-model
Aug 31 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
jQuery实现日历效果
2020/09/11 jQuery
Vue router安装及使用方法解析
2020/12/02 Vue.js
python操作xml文件详细介绍
2014/06/09 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python decimal模块使用方法详解
2020/06/08 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
运动会稿件200字
2014/02/07 职场文书
体育活动总结范文
2014/05/04 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
房贷收入证明范本
2015/06/12 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
解析目标检测之IoU
2021/06/26 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS