每次看每次都觉得新鲜,用起来的时候却还是习惯性的忘记其原有的东西,自己再写出来一个自己都觉得是多余的内容。所以此次决定再捋一遍,记录每个class 和标签,具体的再不断的完善更新吧,下次再用直接查笔记,就不用去官网了。哈哈(想得美(─.─|||)
一、页面排版:
1.页面主体
全局 font-size:14px; line-height:1.428(即20px); color:#333;
<p> 段落元素为 1/2 行高(即10px);
- lead
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; } @media (min- 768px){ .lead{ font-size:21px; } }
2.标题 ( 内联元素定义class=(.h1~h6))
<h1> //36px
<h2> //30px
<h3> //24px
<h4> //18px
<h5> //14px
<h6> //12px
可以嵌入 <small>元素作为副标题,h1~h3下的small, font-size:65%;(分别为23.4px ;19.5px; 15.6px) h4~h6下,font-size:75%;(分别为:13.5px;10.5px;9px;), 样式更改:color:#777;line-height:1;font-weight:400; 其余样式参考官网。
3.内联文本元素
<mark> // 添加标记
<del> // 删除文本
<s> // 无用本文
<ins> // 插入的文本
<u> // 下划线文本 效果同上
<small> // 标准字号的85%
<strong> // 加粗 700
<em> // 倾斜
4.对齐方式
.text-left // 居左
.text-right // 居右
.text-center // 居中
.text-justify // 两端对齐,支持度不佳
.text-nowrap // 不换行
5.英文文本大小写
.text-lowercase // 小写
.text-uppercase // 大写
.text-capitalize // 首字母大写
6.缩略语
<abbr> // 没有被复写,可添加 class=“initialism”
.initialism
.initialism{ font-size:90%; text-transform:uppercase; }
7.地址文本
<address> // 去掉倾斜,设置行高,底部20px
8.引用为本
<blockquote> // border-left:5px solid #eee; font-size:17.5px; margin:0 0 20px; padding:10px 20px;
.blockquote-reverse // 反向(border-right:5px solid #eee; border-left:0; padding-right:15px; padding-left:0; text-align:right;)
blockquote.pull-right // 反向 (效果同上)
9.列表
.list-unstyled // ul 移除默认样式
.list-inline // ul 设置成内联方式
.dl-horizontal // dl 水平排列描述列表
10.代码
<code> // 内联代码
<kbd> // 用户输入
<pre> // 代码块
<var> // 表示标记变量,没有复写css
<samp> // 代表程序输出,没有复写css
11.表格
*基于table添加class*
.table // 基本的表格样式,以下类别要基于class=“table” 基础上出现
.table-striped // 条纹状的表格,<tbody>产生一行隔一行加单色背景效果
.table-bordered // 增加边框
.table-hover // <tbody>下表格悬停鼠标实现背景效果
*在tr上添加class,设置每一行的背景样式*
.success // 成功或者积极的动作
.active // 鼠标悬停在行或者单元格上
.info // 普通的提示信息或者动作
.warning // 警告或需要用户注意
.danger // 危险或潜在带来的负面影响的动作
.sr-only // 隐藏行,不仅仅在tr用,可以在测试的地方用
*响应式表格,父元素上设置,<768px出现边框*
.table-responsive // 缩小的时候会加上边框, 在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
fieldset // Firefox 浏览器对 fieldset
元素设置了一些影响 width
属性的样式,导致响应式表格出现问题。可使用针对 Firefox 的 hack 代码解决,但是以下代码并未集成在 Bootstrap 中:
@-moz-document url-prefix() { fieldset { display: table-cell; } }
12.按钮 (a,button,input 通用的)
1) 都为按钮使用法:
<a href="#" class="btn">按钮</a> <button class="btn">Button</button> <input type="button" class="btn" value="input" >
P.s. 1、导航和导航组件只支持<button>元素
2、<a>作为按钮使用,并有触发某些功能,不用于链接页面功能,那么,必设置 role="button" 属性。
3、跨浏览器展现,尽可能的使用<button>元素,匹配各个浏览器的兼容的绘制效果, <input> line-height属性在firefox<30上出先bug。
2) class 类名:
.btn-default // 默认样式
.btn-success // 成功样式
.btn-info // 一般信息样式
.btn-warning // 警告样式
.btn-danger // 危险样式
.btn-primary // 首选项样式
.btn-link // 链接样式
3)尺寸大小: (从大到小)
.btn.btn-lg
.btn
.btn.btn-sm
.btn.btn-xs
4) 其他类别:
.btn.btn-block //块级换行
.btn.active //激活按钮,点击的样式
.btn.disabled //禁用按钮