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

顺亿

2026-09-26 • 👁 0人浏览过

一. 概述一下理念 bootstrap基于H5开发。提倡移动先行（媒询声明是必须的），对浏览器支持面不是很广。响应式图片：max-width:100% height:auto; 可以加上：.img-responsive类排版方面的基本样式为： body的margin为0，背景色为白色，行间距为20/14倍使用Normalize.css库，使各个浏览器差别最小化居中容器container有一个最大范围。（最大左右margin为auto，和设备有关）二. 文字基础排版（全局设置） 1. 标题（h标记和small标记） 123456

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"
1span
class
=
"lead"
>email me
span
>

如图.lead和h1的对比效果：
2. 强调文本
强调元素表现small（可以直接套用.small类）小号文本strong着重（加粗）em斜体cite引用来源，字体大小为85%
3. 缩略语abbr和.initialism
两者都可以实现下划虚线悬停手型效果 需要搭配title属性使用。
4. 地址address
用来包裹和联系方式有关的信息。样式差别是间距和底部样式稍微有点不同。
12345678910address
>
    
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.com
a
>
address
>

效果如图
5. 引用blockquote
引用的一般格式是
1234
    爱情不是你想买想买就能买
    出自爱情买卖

当然，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类
12345ul
class
=
"list-inline"
>
            
li
>home
li
>
            
li
>article
li
>
            
li
>about
li
>
        
ul
>

（2）有序列表ol-li
更换了字体，显示更加柔和
（3）dl-dt-dd定义列表
定义列表包括了描述信息，bootstrap下的
dl-dt-dd定义列表
通常也是纵向排列的。
12345678dl
>
    
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多行代码块。
代码样式的用法示例如下：
123code
>
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
1p
class
=
"mark"
>this is mark text
p
>

（2）del标记和s标记
1del
>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】文本排版练习
12345678div
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列的表格，记录信息
12345678910111213141516171819202122232425262728293031323334353637383940table
>
                    
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:压缩，稍微小一点——减少单元格的内边距。全部应用后是这样的。
代码清单
12345678910111213141516171819202122232425262728293031323334353637383940table
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
>



                            
                            

    
                                
                                    ‹
                                    
                                        上一篇
                                        js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）_javascript技巧
                                    
                                
    


    
                                
                                    
                                        下一篇
                                        LCOV 文件拼接的正确方法：直接 cat 是否可行？
                                    
                                    ›

相关文章