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”给定义列表实现水平显示效果。
posted @ 2018-03-01 14:59  宁静花园  阅读(282)  评论(0编辑  收藏  举报