第二章之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 location几个方法小姐
Jul 09 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
JS实现瀑布流布局
Oct 21 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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中如何直接执行SHELL
2013/06/28 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
使用python实现ANN
2017/12/20 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
Python3 翻转二叉树的实现
2019/09/30 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python time.strptime格式化实例详解
2021/02/03 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
金融专业推荐信
2013/11/14 职场文书
相亲大会策划方案
2014/06/05 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
应聘教师自荐信
2015/03/26 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书