加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

学习使用Bootstrap页面排版样式

发布时间:2020-12-18 00:38:17 所属栏目:安全 来源:网络整理
导读:Bootstrap之页面排版样式 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。 1. Bootstrap 特点 Boot

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

3. Boostrap的排版样式

页面主体

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

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

设置文本对齐

//居左

//居中

//居右

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

//不换行

设置英文文本大小写

//小写

//大写

//首字母大写

缩略语

地址文本

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。

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

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读