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仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
使用jquery如何获取时间
Oct 13 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Node.js从字符串生成文件流的实现方法
Aug 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中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
javascript 写类方式之六
2009/07/05 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
Python函数学习笔记
2008/10/07 Python
Python函数中定义参数的四种方式
2014/11/30 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python 对象中的数据类型
2017/05/13 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
战略合作意向书范本
2014/04/01 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
婚礼答谢词
2015/01/04 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python