《深入理解bootstrap》读书笔记：第三章CSS布局
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了《深入理解bootstrap》读书笔记：第三章CSS布局，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5553字，纯文字阅读大概需要8分钟。
内容图文
一. 概述一下理念
二. 文字基础排版（全局设置）
1.标题（h标记和small标记）
|
1
2
3
4
5
6
|
<h1>header1<small>small标记的副标题<h2>header2<small>small标记的副标题<h3>header3<small>small标记的副标题<h4>header4<small>small标记的副标题<h5>header5<small>small标记的副标题<h6>header6<small>small标记的副标题 |
所有标题元素里的内容的字体颜色都是灰色（#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 |
如图.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. 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:<address> <strong>汤姆大叔 <a href="mailto:#">tomxu@outlook.com |
效果如图
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>article <li>about |
（2）有序列表ol-li
更换了字体，显示更加柔和
（3）dl-dt-dd定义列表
定义列表包括了描述信息，bootstrap下的dl-dt-dd定义列表通常也是纵向排列的。
|
1
2
3
4
5
6
7
8
|
<dl> <dt>标题1 <dd>描述1 <dt>标题2 <dd>描述2 <dt>标题3 <dd>描述3 |
我想在横向展示一个商品列表，包括描述信息。如果给dl加上class="dl-horizontal"
7. 代码
包括code单行代码，kbd用户输入代码和pre多行代码块。
代码样式的用法示例如下：
|
1
2
3
|
<code><body></body><kbd><body></body><pre><body></body> |
（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 |
（2）del标记和s标记
|
1
|
<del>I am delated. |
（3）ins标记和u标记
（4）对齐相关
（5）大小写相关：
【例3.1】文本排版练习
|
1
2
3
4
5
6
7
8
|
<div class="text-justify"> <h3 class="text-center">I am afraid <small>William Shakespeare <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>This is why I am afraid, you say that u love me too. <ins><em>译文 <p>你说烟雨微芒，兰亭远望；后来轻揽婆娑，深遮霓裳。你说春光烂漫，绿袖红香；后来内掩西楼，静立卿旁。你说软风轻拂，醉卧思量；后来紧掩门窗，漫帐成殇。 <p>你说情丝柔肠，如何相忘；我却眼波微转，兀自成霜。 |
三. 表格相关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>TITLE <td>AUTHOR <td>PUBDATE <td>PRICE <tbody> <tr> <td>1 <td>西游记 <td>吴承恩 <td>10.99 <td>2010-1-1 <tr> <td>2 <td>三国演义 <td>罗贯中 <td>20.99 <td>2010-1-2 <tr> <td>3 <td>水浒传 <td>施耐庵 <td>30.99 <td>2010-1-3 <tr> <td>4 <td>红楼梦 <td>曹雪芹 <td>40.99 <td>2010-1-4 |
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>TITLE <td>AUTHOR <td>PUBDATE <td>PRICE <tbody> <tr> <td>1 <td>西游记 <td>吴承恩 <td>10.99 <td>2010-1-1 <tr> <td>2 <td>三国演义 <td>罗贯中 <td>20.99 <td>2010-1-2<c
|
内容总结
以上是互联网集市为您收集整理的《深入理解bootstrap》读书笔记：第三章CSS布局全部内容，希望文章能够帮你解决《深入理解bootstrap》读书笔记：第三章CSS布局所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。