一. 概述一下理念 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>header1small>small标记的副标题small>h1> h2>header2small>small标记的副标题small>h2> h3>header3small>small标记的副标题small>h3> h4>header4small>small标记的副标题small>h4> h5>header5small>small标记的副标题small>h5> h6>header6small>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 mespan> 如图.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 600br> San Francisco, CA 94107br> abbr title="Phone">P:abbr>(123) 456-7890 address> address> strong>汤姆大叔strong>br> a href="mailto:#">tomxu@outlook.coma> 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>homeli> li>articleli> li>aboutli> ul> (2)有序列表ol-li 更换了字体,显示更加柔和 (3)dl-dt-dd定义列表 定义列表包括了描述信息,bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。 1 2 3 4 5 6 7 8 dl> dt>标题1dt> dd>描述1dd> dt>标题2dt> dd>描述2dd> dt>标题3dt> dd>描述3dd> 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 textp> (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 Shakespearesmall>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>IDtd> td>TITLEtd> td>AUTHORtd> td>PUBDATEtd> td>PRICEtd> tr>thead> tbody> tr> td>1td> td>西游记td> td>吴承恩td> td>10.99td> td>2010-1-1td> tr> tr> td>2td> td>三国演义td> td>罗贯中td> td>20.99td> td>2010-1-2td> tr> tr> td>3td> td>水浒传td> td>施耐庵td> td>30.99td> td>2010-1-3td> tr> tr> td>4td> td>红楼梦td> td>曹雪芹td> td>40.99td> td>2010-1-4td> 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>IDtd> td>TITLEtd> td>AUTHORtd> td>PUBDATEtd> td>PRICEtd> tr>thead> tbody> tr> td>1td> td>西游记td> td>吴承恩td> td>10.99td> td>2010-1-1td> tr> tr> td>2td> td>三国演义td> td>罗贯中td> td>20.99td> td>2010-1-2td>