学习使用Bootstrap页面排版样式-成都快上网建站

学习使用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



  
  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.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

引用文本

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

列表排版

//移出默认样式
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
//设置成内联
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
//水平排列描述列表
Bootstrap
Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

代码

<section>   //内联代码
press ctrl + ,     //用户输入
<p>Please input...</p>
//代码块

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


标题名称:学习使用Bootstrap页面排版样式
URL分享:http://kswjz.com/article/ggishh.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流