Bootstrap3学习笔记(二)之排版


Posted in Javascript onMay 20, 2016

在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统

对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

如果页面中有一个需要与众不同的h1,则可以将其包含在样式为“page-header的div中。

<div class="page-header">
<h1>Twitter Bootstrap <small>An intuitive front-end framework</small></h1>
</div>

Bootstrap默认字体大小为14px,行高1.428,段落间距10px,如果某个段落需要醒目一点,可是有'lead'类
使用text-*类,可以很方便的设定文本的水平对齐方式

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

HTML中的文字格式标记在Bootstrap中都可以使用

<p><b>This is bold text</b></p>
<p><big>This is big text</big></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

字母格式转换类可以很好的完成需要的转换:

<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>

颜色是传递内容重要性的有力方式,Bootstrap提供了便利的设定文字强调级别的类:

<p class="text-muted">Muted: This text is grayed out.</p>
<p class="text-primary">Important: Please read the instructions carefully before proceed.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Error: An error has been occurred while submitting your data.</p>

对引用内容也做了修饰:

<blockquote class="pull-right">
<p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
<small>by <cite>Albert Einstein</cite></small>
</blockquote>

其中的类是为了右对齐引用。

以上所述是小编给大家介绍的Bootstrap3学习笔记(二)之排版的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
BootStrap3学习笔记(一)之网格系统
May 20 #Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 #Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 #Javascript
AngularJS中的指令全面解析(必看)
May 20 #Javascript
You might like
解析PHP工厂模式的好处
2013/06/18 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python 转换文本编码实现解析
2019/08/27 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Python requests上传文件实现步骤
2020/09/15 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
品质主管岗位职责
2014/03/16 职场文书
百年校庆节目主持词
2014/03/27 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库