欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-18 12:12:07
...

一. 概述一下理念

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>
《深入理解bootstrap》读书笔记:第三章 CSS布局《深入理解bootstrap》读书笔记:第三章 CSS布局

所有标题元素里的内容的字体颜色都是灰色(#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的对比效果:

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

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>

效果如图

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

5. 引用blockquote

引用的一般格式是

1
2
3
4

爱情不是你想买想买就能买

出自爱情买卖

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

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

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

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

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>

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

(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>

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

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

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

7. 代码

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

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

1
2
3
code><body></body>code>br>
kbd><body></body>kbd>
pre><body></body>pre>
《深入理解bootstrap》读书笔记:第三章 CSS布局

(1)code

code内联代码可以在行间引用。原理是给code标记定义背景色,文字颜色

(2)kbd

kbd表示需要用户输入,可以配合input元素使用。

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

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

(3)多行代码块pre

pre是预编译的意思。bootstrap实现基本方法是背景-边框,高度,圆角,竖向滚动。

粘贴进去会有空格。

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

8.其它H5标记补充

(1),也可以使用.mark

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

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

(2)del标记和s标记

1
del>I am delated.del>

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

(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>

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

三. 表格相关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样式时显示:
《深入理解bootstrap》读书笔记:第三章 CSS布局

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

1.table基础样式

(1) 给table标签加上class="table",效果就变为:

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

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

秒变高富帅了有木有?

(2)隔行变色.table-striped

table-striped:斑马线

使用CSS3的:nth-child实现。

(3)添加边框

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

(4)悬停高亮

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

(5)紧凑型表格

table-condensed:压缩,稍微小一点——减少单元格的内边距。全部应用后是这样的。

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

代码清单

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>
《深入理解bootstrap》读书笔记:第三章 CSS布局

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 《深入理解bootstrap》读书笔记:第三章 CSS布局
  • 专题推荐

    作者信息
    《深入理解bootstrap》读书笔记:第三章 CSS布局

    认证0级讲师

    推荐视频教程
  • 《深入理解bootstrap》读书笔记:第三章 CSS布局javascript初级视频教程
  • 《深入理解bootstrap》读书笔记:第三章 CSS布局jquery 基础视频教程
  • 视频教程分类