当前位置：Gxlcms > html代码 > 《深入理解bootstrap》读书笔记：第三章CSS布局

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

时间：2021-07-01 10:21:17 帮助过：30人阅读

一. 概述一下理念

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 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 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.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><body></body>code><br>
<kbd><body></body>kbd>
<pre><body></body>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>

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！