Bootstrap学习笔记(一)html &css基础

1. 特点：

• 移除body的margin声明
• 设置body的背景色为白色
• 为排版设置了基本的字体、字号和行高
• 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

2.标题css

1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

{派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

li strong { font-style: italic; font-weight: normal; }

后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}

子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

h1 > strong {color:red;}
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

 

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。}

3. 段落

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：

Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。

粗体；b,strong { font-weight: bold; /*文本加粗*/}

斜体：<em> <i>

强调的类：

• .text-muted：提示，使用浅灰色（#999）
• .text-primary：主要，使用蓝色（#428bca）
• .text-success：成功，使用浅绿色(#3c763d)
• .text-info：通知信息，使用浅蓝色（#31708f）
• .text-warning：警告，使用黄色（#8a6d3b）
• .text-danger：危险，使用褐色（#a94442）
• 对齐方式：

•  .text-left：左对齐

•  .text-center：居中对齐

•  .text-right：右对齐

•  .text-justify：两端对齐

4.列表

Bootstrap根据平时的使用情形提供了六种形式的列表：

   ☑  普通列表

   ☑  有序列表

   ☑  去点列表

   ☑  内联列表

   ☑  描述列表

   ☑  水平描述列表

 通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

 

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

转载于:https://www.cnblogs.com/EmilyGarden/p/8487155.html