Bootstrap排版样式

学习要点:

  1.页面排版

本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面 主体、对齐、列表等常规内容。

一.页面排版

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

1.页面主体

Bootstrap 将全局

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

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

lead样式class类,语气加重,字体加粗大点(Bootstrap)

<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>

2.标题

我们从 Firebug 查看元素了解到,Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,

<h1 ~ h6>标签样式(Bootstrap)

<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px

并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

<span class="h1">Bootstrap</span>

注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保 证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。

在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,

<small>标签样式,在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题(Bootstrap)

<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>

通过 Firebug 查看,我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%,那么 通过计算(查看 Firebug 计算后的样式),h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px; h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为:13.5px、10.5px、9px。 在 h1 ~ h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度 为 400。

3.内联文本元素

添加标记,元素或.mark 类

<mark>标签样式,内联文本元素,添加标记,元素或.mark 类(Bootstrap)

<p>Bootstrap<mark>框架</mark></p>

各种加线条的文本

<del>标签样式,内联文本元素,删除的文本(Bootstrap)
<s>标签样式,内联文本元素,无用的文本(Bootstrap)
<ins>标签样式,内联文本元素,插入的文本(Bootstrap)
<u>标签样式,内联文本元素,效果同上,下划线文本(Bootstrap)

<del>Bootstrap 框架</del>     //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本
<u>Bootstrap 框架</u> //效果同上,下划线文本

各种强调的文本

<small>标签样式,内联文本元素,标准字号的 85%(Bootstrap)
<strong>标签样式,内联文本元素,加粗(Bootstrap)
<em>标签样式,内联文本元素,倾斜(Bootstrap)

<small>Bootstrap 框架</small>     //标准字号的 85%
<strong>Bootstrap 框架</strong> //加粗 700
<em>Bootstrap 框架</em> //倾斜

4.对齐

设置文本对齐

text-left样式class类,居左(Bootstrap)
text-center样式class类,居中(Bootstrap)
text-right样式class类,居右(Bootstrap)
text-justify样式class类,两端对齐,支持度不佳(Bootstrap)
text-nowrap样式class类,不换行(Bootstrap)

<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> //不换行

5.大小写

设置英文文本大小写

text-lowercase样式class类,小写(Bootstrap)
text-uppercase样式class类,大写(Bootstrap)
text-capitalize样式class类,首字母大写(Bootstrap)

<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6.缩略语

<abbr>标签样式,缩略语,文字下虚线(Bootstrap)

initialism样式class类,文字上鼠标放上去显示title文本和一个?图标(Bootstrap)

Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7.地址文本

设置地址,去掉了倾斜,设置了行高,底部 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>

8.引用文本

默认样式引用,增加了做边线,设定了字体大小和内外边距

<blockquote>标签样式,默认样式引用,增加了做边线,设定了字体大小和内外边距(Bootstrap)

<blockquote>
Bootstrap 框架
</blockquote>

反向引用

blockquote-reverse样式class类,反向引用(Bootstrap)

<blockquote class="blockquote-reverse ">
Bootstrap 框架
</blockquote>

9.列表排版

移出默认样式

list-unstyled样式class类,列表排版,移出默认样式(Bootstrap)

<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

设置成内联

list-inline样式class类,列表排版,设置成内联(Bootstrap)

<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>

水平排列描述列表

 dl-horizontal样式class类,列表排版,水平排列描述列表(Bootstrap)

<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>

10.代码

内联代码

<code>标签样式,内联代码(Bootstrap)

<code>&lt;section&gt;</code>

用户输入

<kbd>标签样式,用户输入(Bootstrap)

press <kbd>ctrl + ,</kbd>

代码块

<pre>标签样式,代码块(Bootstrap)

<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

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

第二百三十二节,Bootstrap排版样式的更多相关文章

  1. 第三百三十二节,web爬虫讲解2—Scrapy框架爬虫—Scrapy使用

    第三百三十二节,web爬虫讲解2—Scrapy框架爬虫—Scrapy使用 xpath表达式 //x 表示向下查找n层指定标签,如://div 表示查找所有div标签 /x 表示向下查找一层指定的标签 ...

  2. 第二百三十七节,Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  3. 第二百三十九节,Bootstrap路径分页标签和徽章组件

    Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...

  4. 第二百三十八节,Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文 ...

  5. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  6. 第二百三十三节,Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...

  7. 第二百三十一节,Bootstrap 介绍

    Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boos ...

  8. 第二百三十六节,Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  9. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

随机推荐

  1. TestNG 七 annotation

    TestNG中用到的annotation的快速预览及其属性. @BeforeSuite:   被注释的方法将在所有测试运行前运行 @AfterSuite:  被注释的方法将在所有测试运行后运行 @Be ...

  2. 在xcode5下利用Source Control 做 git 项目管理

    xcode5做了很大的更新,其中一点非常实用的功能是集成了Source control项目管理,而且和git做了完美的结合:非常实用: 使用: 在新建项目时,选择 下面的 Create a git r ...

  3. CosmosEngine - Unity3D /2D 轻量级游戏开发框架

    CosmosEngine https://github.com/mr-kelly/CosmosEngine 快速入门 简介 特性 约定 整体架构图 使用经验 工作流 未来功能 快速入门 1.将NGUI ...

  4. 【PHP】导入、导出Excel表格(有使用PHPExcel和不使用的两个版本)

    ------------        首先,导出excel          ---------------- 一.不使用PHPExcel的版本,很简单的一个方法,简洁.推荐 很简单的导出一个exc ...

  5. ASP.NET MVC3 系列教程 - 模型

    I:基础绑定的实现 1.在前面的两篇基础文章(路由 及 控制器&视图)当中,还没对QueryString的绑定进行介绍,因为我觉得它更适合放在这一章节中去介绍.我们在用WebForm去开发的时 ...

  6. easyui datagrid动态设置行、列、单元格不允许编辑

    Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...

  7. PL/SQL 美化器不能解析文本

    1.问题:PL/SQL美化器不能解析文本 原始sql语句如下: CREATE OR REPLACE VIEW V_GGXZBM AS SELECT XZBM,XZMC,CASE WHEN PARENT ...

  8. 简单的刚開始学习的人配置Android SDK+ADT+Eclipse

    1.下载JDK.Android SDK和Eclipse(Eclipse 版本号最好新一些) 注意:下载的SDK最好和后面的ADT配套,否则Eclipse可能会报错. 如:SDK 21.0.1 相应 A ...

  9. top命令中内存参数

    总结:VIRT 虚拟内存中含有共享库.共享内存.栈.堆,所有已申请的总内存空间.RES  是进程正在使用的内存空间(栈.堆),申请内存后该内存段已被重新赋值.SHR  是共享内存正在使用的空间.SWA ...

  10. Canvas转换为Blob对象并使用Ajax发送

    Canvas转换为Blob对象并使用Ajax发送 转换为Blob对象后,可以使用Ajax上传图像文件. 先从canvas获取dataurl, 再将dataurl转换为Blob对象 var dataur ...