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插件集合
Jan 12 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
详解JS函数重载
Dec 04 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
小程序实现录音上传功能
Nov 22 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
ES6中的Javascript解构的实现
Oct 30 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
德生PL550的电路分析
2021/03/02 无线电
php5.3 goto函数介绍和示例
2014/03/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript call方法使用说明
2010/01/11 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript动态加载三
2012/08/22 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
详解Python Socket网络编程
2016/01/05 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
用Python逐行分析文件方法
2019/01/28 Python
交警个人先进事迹材料
2014/05/11 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
初中信息技术教学计划
2015/01/22 职场文书
生产现场禁烟通知
2015/04/23 职场文书
门卫管理制度范本
2015/08/05 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python