需灵活掌握的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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
PHP4中实现动态代理
2006/10/09 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
jQuery自定义多选下拉框效果
2017/06/19 jQuery
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
Django框架多表查询实例分析
2018/07/04 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python换行与不换行的输出实例
2020/02/19 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
仓库组长岗位职责
2014/01/29 职场文书
九年级政治教学反思
2014/02/06 职场文书
煤矿安全协议书
2014/08/20 职场文书
写给老师的感谢信
2015/01/20 职场文书
早恋主题班会
2015/08/14 职场文书
2016国培学习心得体会
2016/01/08 职场文书
小学英语听课心得体会
2016/01/14 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL