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

<Meta charset="UTF-8"> Bootstrap

3. Boostrap的排版样式

页面主体

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

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

设置文本对齐

//居左

//居中

//居右

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

//不换行

设置英文文本大小写

//小写

//大写

//首字母大写

缩略语

地址文本

底部 20px

Twitter,Inc.


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

引用文本

增加了做边线,设定了字体大小和内外边距
Bootstrap 框架
//反向

列表排版

Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • Bootstrap 框架
  • //设置成内联
    <ul class="list-inline">

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

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

    代码

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

    Please input...

    //代码

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

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

    猜你在找的Bootstrap相关文章