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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
详解vue项目构建与实战
Jun 27 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JavaScript判断对象和数组的两种方法
May 31 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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 开源AJAX框架14种
2009/08/24 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Python中如何定义一个函数
2016/09/06 面试题
活动总结格式
2014/08/30 职场文书
学习十八大演讲稿
2014/09/15 职场文书
师范生教育见习总结
2015/06/23 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
浅析Django接口版本控制
2021/06/26 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA