学习使用Bootstrap页面排版样式

2024-02-23 23:58:05 41

Bootstrap之页面排版样式

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

1.Bootstrap特点

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

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

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

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

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

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

2.引入Boostrap

//第一个Bootstrap




Bootstrap



Bootstrap

3.Boostrap的排版样式

页面主体

Bootstrap将全局font-size设置为14px，line-height行高设置为1.428(即
20px)；

段落元素被设置等于1/2行高(即10px)；颜色被设置为#333。

设置文本对齐

Bootstrap框架//居左
Bootstrap框架//居中
Bootstrap框架//居右
Bootstrap框架//两端对齐，支持度不佳
Bootstrap框架//不换行

设置英文文本大小写

Bootstrap框架//小写
Bootstrap框架//大写
Bootstrap框架//首字母大写

缩略语

Bootstrap框架

地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

Twitter,Inc.

795FolsomAve,Suite600

SanFrancisco,CA94107

P:(123)456-7890

引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距
Bootstrap框架
//反向
Bootstrap框架

列表排版

//移出默认样式

Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架


//设置成内联

Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架
Bootstrap框架


//水平排列描述列表

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

代码

<section>//内联代码
pressctrl+,//用户输入
<p>Pleaseinput...</p>//代码块

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

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

学习使用Bootstrap页面排版样式

热门推荐

随机推荐