第二章之Bootstrap 页面排版样式


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.页面排版

本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。

一.页面排版

Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>

2.标题

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px

我们从 Firebug 查看元素了解到, Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体
<span class="h1">Bootstrap</span>

注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。

在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>

通过 Firebug 查看,我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%,那么通过计算(查看 Firebug 计算后的样式), h1 ~ h3 下的 small 为 23.4px、 19.5px、 15.6px;h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为:13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度为 400。

3.内联文本元素

//添加标记,<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上,下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜

4.对齐

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐,支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行

5.大小写

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6.缩略语

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7.地址文本

//设置地址,去掉了倾斜,设置了行高,底部 20px
<address>
<strong>Twitter, Inc.</strong><br>

795 Folsom Ave, Suite 600<br>

San Francisco, CA 94107<br>

<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

8.引用文本

//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote>
Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">

Bootstrap 框架
</blockquote>

9.列表排版

//移出默认样式
<ul class="list-unstyled">
<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>

<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">

<dt>Bootstrap</dt>

<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>

10.代码

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre><p>Please input...</p></pre>

Bootstrap 还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复写 CSS。

以上所述是小编给大家介绍的Bootstrap 页面排版样式的相关知识,希望对对大家有所帮助!

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
JQuery基础语法小结
Feb 27 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 #Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
第四章之BootStrap表单与图片
Apr 25 #Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
You might like
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python易忽视知识点小结
2015/05/25 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python文件路径名的操作方法
2019/10/30 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
乡镇干部十八大感言
2014/02/17 职场文书
聘任书模板
2014/03/29 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
基层党组织整改方案
2014/10/25 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis