《深入理解bootstrap》读书笔记：第三章 CSS布局

一. 概述一下理念 bootstrap基于H5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。 响应式图片：max-width:100% height:auto; 可以加上：.img-responsive类 排版方面的基本样式为： body的margin为0，背景色为白色，行间距为20/14倍 使用Normalize.css库，使各个浏览器差别最小化 居中容器container有一个最大范围。（最大左右margin为auto，和设备有关） 二. 文字基础排版（全局设置） 1. 标题（h标记和small标记） 1 2 3 4 5 6 h1 >header1 small >small标记的副标题 small > h1 > h2 >header2 small >small标记的副标题 small > h2 > h3 >header3 small >small标记的副标题 small > h3 > h4 >header4 small >small标记的副标题 small > h4 > h5 >header5 small >small标记的副标题 small > h5 > h6 >header6 small >small标记的副标题 small > h6 > 所有标题元素里的 内容的字体颜色都是灰色 （#999999），行间距都为1。

内的文本字体在h1、h2、h3内是当前元素所对应 字体大小的65%；而在h4、h5、h6下则是75%。

A. 字体大小为14px，间距为20px。p元素的margin-bottom为行间距一半（10px）。

B. 突出显示

当你有一段文字，想高亮显示，又不想获得和h标记一样的权重时，可以class="lead"

1 span class = "lead" >email me span > 如图.lead和h1的对比效果：

2. 强调文本 强调元素 表现 small

（可以直接套用.small类）

小号文本 strong 着重（加粗） em 斜体 cite 引用来源，字体大小为85% 3. 缩略语abbr和.initialism 两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。

4. 地址address 用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。

1 2 3 4 5 6 7 8 9 10 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 > address > strong >汤姆大叔 strong > br > a href = "mailto:#" >tomxu@outlook.com a > address > 效果如图

5. 引用blockquote 引用的一般格式是

1 2 3 4 爱情不是你想买想买就能买

出自 爱情买卖

当然，small换成footer也是一样的效果。

默认是左对齐的，想要右对齐可以对blockquote使用.pull-right类。整体飘到了右边。

6. 列表 （1）ul-li无序列表 bootstrap下，普通列表的ul-li框架和默认基本是一样的。

A. ul-li列表的样式是由list-style决定的。在bootstrap框架使用.list-unstyle类。源码样式无非是padding-left:0;list-style:none。

注意：如果是列表嵌套列表，对祖父级的ul应用 . list-unstyle类，孙代li是不会继承的。

B. 内联列表：正常的ul-li是竖着显示的。在很多场合，最典型的就是导航，需要把li打横排列。这时可以使用内联列表的 .list-inline类

1 2 3 4 5 ul class = "list-inline" > li >home li > li >article li > li >about li > ul >

（2）有序列表ol-li 更换了字体，显示更加柔和

（3）dl-dt-dd定义列表 定义列表包括了描述信息，bootstrap下的 dl-dt-dd定义列表 通常也是纵向排列的。

1 2 3 4 5 6 7 8 dl > dt >标题1 dt > dd >描述1 dd > dt >标题2 dt > dd >描述2 dd > dt >标题3 dt > dd >描述3 dd > dl >

我想在横向展示一个商品列表，包括描述信息。如果给dl加上 class="dl-horizontal"

7. 代码 包括code单行代码，kbd用户输入代码和pre多行代码块。

代码样式的用法示例如下：

1 2 3 code > code > br > kbd > kbd > pre > pre > （1）code code内联代码可以在行间引用。原理是给code标记定义背景色，文字颜色

（2）kbd kbd表示需要用户输入，可以配合input元素使用。

1 请输入 ctrl+c 来复制代码，然后使用 ctrl+v 来粘贴代码

（3）多行代码块pre pre是预编译的意思。bootstrap实现基本方法是背景-边框，高度，圆角，竖向滚动。

粘贴进去会有空格。

类似还有 可以格式化代码。用较为标准的字体和行间距显示

8.其它H5标记补充 （1） ,也可以使用.mark

1 p class = "mark" >this is mark text p >

（2）del标记和s标记 1 del >I am delated. del >

（3）ins标记和u标记 下划线，ins定义已经被插入文档中的文本。u标记 语义和ins不同，如果文本不是超链接，就不要对其使用u标记 （4）对齐相关 ——text-left ——text-center ——text-right 文本居左中右。 ——text-justify：自己判断——齐行定义单词间的间隔对齐，跟避头尾法则类似。注意css3中也有相应的属性。 ——text-nowrap：浏览器缩小时始终保持1行 （5）大小写相关： text-lowercase小写 text-uppercase大写 text-capitalize首字母大小 【例3.1】文本排版练习 1 2 3 4 5 6 7 8 div class = "text-justify" > h3 class = "text-center" >I am afraid small >William Shakespeare small > h3 > p class = "text-capitalize" >you say that you love rain, but you open your umbrella when it rains.You say that you love the sun, but you find a shadow spot when the sun shines.You say that you love the wind, but you close your windows when wind blows. p > p > This is why I am afraid, you say that u love me too. p > ins > em >译文 em > ins > p >你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。 p > p >你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。 p > div >

三. 表格相关css 表格实现是给table加上.table类

【例3.2】 做一个5行5列的表格，记录信息

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 table > thead > tr > td >ID td > td >TITLE td > td >AUTHOR td > td >PUBDATE td > td >PRICE td > tr > thead > tbody > tr > td >1 td > td >西游记 td > td >吴承恩 td > td >10.99 td > td >2010-1-1 td > tr > tr > td >2 td > td >三国演义 td > td >罗贯中 td > td >20.99 td > td >2010-1-2 td > tr > tr > td >3 td > td >水浒传 td > td >施耐庵 td > td >30.99 td > td >2010-1-3 td > tr > tr > td >4 td > td >红楼梦 td > td >曹雪芹 td > td >40.99 td > td >2010-1-4 td > tr > tbody > table >

无任何class样式时显示：

1.table基础样式 （1） 给table标签加上class="table"，效果就变为：

秒变高富帅了有木有？

（2）隔行变色. table-striped table-striped：斑马线

使用CSS3的:nth-child实现。

（3）添加边框 使用.table-bordered可以为所有单元格添加1px的边框。

（4）悬停高亮 使用.table:hover可以让当前行悬停高亮

（5）紧凑型表格 table-condensed:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。

代码清单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 table class = "table table-bordered table-striped table-hover table-condensed" > thead > tr > td >ID td > td >TITLE td > td >AUTHOR td > td >PUBDATE td > td >PRICE td > tr > thead > tbody > tr > td >1 td > td >西游记 td > td >吴承恩 td > td >10.99 td > td >2010-1-1 td > tr > tr > td >2 td > td >三国演义 td > td >罗贯中 td > td >20.99 td > td >2010-1-2 td >

《深入理解bootstrap》读书笔记：第三章 CSS布局

In Verbindung stehende Artikel