学习使用Bootstrap页面排版样式
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 <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > </head> <body> <button class="btn btn-info">bootstrap</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. boostrap的排版样式
页面主体
bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即
20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。
设置文本对齐
<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> //不换行
设置英文文本大小写
<p class="text-lowercase">bootstrap 框架</p> //小写 <p class="text-uppercase">bootstrap 框架</p> //大写 <p class="text-capitalize">bootstrap 框架</p> //首字母大写
缩略语
bootstrap<abbr title="bootstrap" class="initialism">框架</abbr>
地址文本
//设置地址,去掉了倾斜,设置了行高,底部 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>
引用文本
//默认样式引用,增加了做边线,设定了字体大小和内外边距 <blockquote>bootstrap 框架</blockquote> //反向 <blockquote class="blockquote-reverse ">bootstrap 框架</blockquote>
列表排版
//移出默认样式 <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>
代码
<code><section></code> //内联代码 press <kbd>ctrl + ,</kbd> //用户输入 <pre><p>please input...</p></pre> //代码块
此外,bootstrap 还列举了<var>表示标记变量,<samp>表示程序输出,只不过没有重新复写 css。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。