@H_502_0@Bootstrap之页面排版样式

@H_502_0@Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

@H_5020@

1. Bootstrap 特点

@H502_0@Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

@H_502_0@(1). 跨设备、跨浏览器，可以兼容所有现代浏览器，包括比较诟病的 IE7、8。

@H_502_0@(3). 提供的全面的组件，Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

@H_502_0@(4). 内置 jQuery 插件，Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。

@H_502_0@(5). 支持 HTML5、CSS3，HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

@H_502_0@(6). 支持 LESS 动态样式，LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS，它和 Bootstrap 能很好的配合开发。

@H_502_0@

2. 引入Boostrap

@H_502_0@

3. Boostrap的排版样式

@H_502_0@页面主体

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

@H_502_0@设置文本对齐

//居左

//居中

//居右

//两端对齐，支持度不佳

//不换行

@H_502_0@设置英文文本大小写

//小写

//大写

//首字母大写

@H_502_0@缩略语

@H_502_0@地址文本

底部 20px

Twitter,Inc.

795 Folsom Ave,Suite 600
San Francisco,CA 94107
(123) 456-7890

@H_502_0@引用文本

增加了做边线，设定了字体大小和内外边距

Bootstrap 框架

//反向

@H_502_0@列表排版

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

//设置成内联
<ul class="list-inline">

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

//水平排列描述列表
<dl class="dl-horizontal">

Bootstrap

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

@H_502_0@代码

//内联代码 press ctrl +, //用户输入

@H_502_0@Please input...

//代码块

@H_502_0@此外，Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写 CSS。

@H_502_0@以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。