需灵活掌握的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字典探测用户名工具
Oct 05 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
PHP使用函数用法详解
2018/09/30 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python3实现SMTP发送邮件详细教程
2018/06/19 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python和php哪个容易学
2020/06/19 Python
python 8种必备的gui库
2020/08/27 Python
python实现粒子群算法
2020/10/15 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
家长学校工作方案
2014/05/07 职场文书
慈善晚会策划方案
2014/05/14 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
七一慰问简报
2015/07/20 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技