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 相关文章推荐
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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
咖啡的化学
2021/03/03 咖啡文化
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
javascript中 try catch用法
2015/08/16 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python如何实现内容写在图片上
2018/03/23 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
教师试用期自我鉴定
2014/02/12 职场文书
物控部经理职务说明书
2014/02/25 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2016公司年会通知范文
2015/04/25 职场文书
小学六一主持词开场白
2015/05/28 职场文书
2016特色励志班级口号
2015/12/24 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书