Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

中心内容

通过添加 .lead 类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

使用 Less 工具构建

variables.less 文件中定义的两个 Less 变量决定了排版尺寸:@font-size-base 和 @line-height-base。第一个变量定义了全局 font-size 基准,第二个变量是 line-height 基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的 margin、 padding 和 line-height。自定义这些变量即可改变 Bootstrap 的默认样式。


—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 排版-页面主体的更多相关文章

  1. SharePoint 2010 master page 控件介绍(3) :页面主体内容

    转:http://blog.csdn.net/lgm97/article/details/6409217 <!-- =====  页面滚动区域开始  ====================== ...

  2. CSS排版页面

    创建CSS文件如下: @charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; border:0px; } ...

  3. HTML页面主体常用设置

    1.定义网页背景颜色:<body bgcolor="red"> <body bgcolor="#0fc"> 2.设置背景图片: < ...

  4. Bootstrap3 排版-列表

    无序列表 排列顺序无关紧要的一列元素. <ul> <li>...</li> </ul> 有序列表 顺序至关重要的一组元素. <ol> < ...

  5. Bootstrap3 排版-引用

    在你的文档中引用其他来源的内容. 默认样式的引用 将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式.对于直接引用,我们建议用 <p> 标签. Lor ...

  6. Bootstrap3 排版-地址

    让联系信息以最接近日常使用的格式呈现.在每行结尾添加 可以保留需要的样式. Twitter, Inc. 795 Folsom Ave, Suite 600 San Francisco, CA 9410 ...

  7. Bootstrap3 排版-缩略语

    当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式.缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移 ...

  8. Bootstrap3 排版-改变大小写

    通过这几个类可以改变文本的大小写. <p class="text-lowercase">Lowercased text.</p> <p class=& ...

  9. Bootstrap3 排版-对齐

    通过文本对齐类,可以简单方便的将文字重新对齐. Left aligned text. Center aligned text. Right aligned text. Justified text. ...

随机推荐

  1. Linux下内存问题检测神器:Valgrind

    在写大型C/C++工程时难免会发生内存泄漏现象,系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题.有时这些问题非常琐碎,而更多时候它会演变成一个调 ...

  2. Django REST framework+Vue 打造生鲜超市(六)

    七.用户登录与手机注册 7.1.drf的token (1)INSTALL_APP中添加 INSTALLED_APPS = ( ... 'rest_framework.authtoken' ) toke ...

  3. ORACLE 行转列 案例解析

    -- 创建 国家城市信息 临时表                  WITH T_NATION_CITY_INFO AS(        SELECT '北京'   AS CITY,'中国' AS N ...

  4. JavaScript树(二) 二叉树搜索

    TypeScript方式实现源码 // 二叉树与二叉树搜索 class Node { key; left; right; constructor(key) { this.key = key; this ...

  5. 使用python实现人脸检测

    人脸检测 人脸检测使用到的技术是OpenCV,上一节已经介绍了OpenCV的环境安装,点击查看. 功能展示 识别一种图上的所有人的脸,并且标出人脸的位置,画出人眼以及嘴的位置,展示效果图如下: 多张脸 ...

  6. Python网络爬虫笔记(二):链接爬虫和下载限速

    (一)代码1(link_crawler()和get_links()实现链接爬虫) import urllib.request as ure import re import urllib.parse ...

  7. mybatis学习三

    Mybatis与pageHelper分页:    分页分为假分页和真分页对应的专业术语叫做逻辑分页和物理分页    逻辑分页:将所有的数据从数据库查询出来,根据需求截取符合要求的数据返回,方便统一但效 ...

  8. 各种电脑进入BIOS快捷键

    组装机主板 品牌笔记本 品牌台式机 主板品牌 启动按键 笔记本品牌 启动按键 台式机品牌 启动按键 华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏基笔记本 F12 惠普台 ...

  9. Java集合详解一

    在学习集合之前,我们需要思考的是为什么要有集合?集合有什么用? 我们知道,在java中有数组的概念,数组可以用来存放一组数据.但是,数组是固定长度的,这样在使用的时候就会有很多的不方便,比如说资源的浪 ...

  10. 报错pymysql.err.DataError: (1406, "Data too long for column 'gender' at row 1")

    在Django默认的admin后台创建超级用户时, 报错pymysql.err.DataError: (1406, "Data too long for column 'gender' at ...