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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
form中限制文本字节数js代码
Jun 10 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
jquery div拖动效果示例代码
2013/12/08 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python中reload(module)的用法示例详解
2017/09/15 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python hashlib加密实现代码
2019/10/17 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
百度吧主申请感言
2014/01/12 职场文书
校园广播稿500字
2014/02/04 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
Elasticsearch 批量操作
2022/04/19 Python