第二章之Bootstrap 页面排版样式
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 学习要点: 1.页面排版本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。 一.页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px); 段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。 Bootstrap 框架
Bootstrap 框架 Bootstrap 框架 Bootstrap 框架 2.标题Bootstrap 框架//36px
Bootstrap 框架//30pxBootstrap 框架//24pxBootstrap 框架//18pxBootstrap 框架//14pxBootstrap 框架//12px我们从 Firebug 查看元素了解到, Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。 注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题, Bootstrap 框架 Bootstrap 小标题
Bootstrap 框架 Bootstrap 小标题Bootstrap 框架 Bootstrap 小标题Bootstrap 框架 Bootstrap 小标题Bootstrap 框架 Bootstrap 小标题Bootstrap 框架 Bootstrap 小标题通过 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 类
Bootstrap框架 //各种加线条的文本Bootstrap 框架//加粗 700 Bootstrap 框架//倾斜4.对齐//居左
//居中 //居右 //两端对齐,支持度不佳 //不换行 5.大小写 //小写
//大写 //首字母大写 6.缩略语7.地址文本Twitter,Inc.
795 Folsom Ave,Suite 600 San Francisco,CA 94107 (123) 456-7890 8.引用文本
Bootstrap 框架
//反向
9.列表排版Bootstrap 框架
10.代码
Bootstrap 还列举了表示标记变量,表示程序输出,只不过没有重新复写 CSS。 以上所述是小编给大家介绍的Bootstrap 页面排版样式的相关知识,希望对对大家有所帮助! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |