bootstrap学习记录

重点强调文本 .lead
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
<li class=“list-unstyled”>有序列表去序号
<ul class=“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;
}
水平定义列表@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
代码
1、：一般是针对于单个单词或单个句子的代码
2、

：一般是针对于多行代码（也就是成块的代码）

3、:一般是表示用户要通过键盘输入的内容

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替



实现斑马线表格





实现表格框高亮

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;
}其实就是将 tr 附带伪类，停留时改变表格框的颜色

表单
placeholder属性为提示字符
内联块元素 display:inline-block
label的for属性，及与某个元素绑定，例如checkbox 点击label选中checkbox
role是一个html5的属性，role="form"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button中role="button"就是

告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性和可交

表单控件(复选框checkbox和单选择按钮radio)

Bootstrap框架中checkbox和radio有点特殊，Bootstrap针对他们做了一些特殊化处理，主要是checkbox和radio与label标签配合使用会出现一些小问题（最头痛的是对齐问题）。使用Bootstrap框架，开发人员无需考虑太多，只需要按照下面的方法使用即可。

记住密码

喜欢

不喜欢

表单按钮 submit button reset

控制表单控件大小
input-sm input-lg用于input textarea select
表单控件状态
焦点状态：：focus
点击后控件发生变化，阴影效果
禁用控件

在需要禁用的空间上添加disabled
表单控件状态（验证状态）
1.has-warning
.has-error
.has-success
把容器添加到这个类中即可
表单提示信息：
help-block 会在下一行显示提示信息
按钮
基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link

必须把按钮添加到btn类中

请始终为button的type属性赋值，因为 ie默认为button 其他浏览器默认为submit
设置按钮大小
.btn-lg,
.btn-group-lg> .btn {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-group-sm> .btn {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.btn-xs,
.btn-group-xs> .btn {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}注意
.btn 已经写了伪类 hover focus active
禁用按钮两种方式：
在标签中添加disabled属性 值为其本身
在class中添加 其本身
对于col-xs col -sm -md理解如图

数据行row必须在container中，以便赋予合适的对齐方式和内距

<div class="container">
<div class="row"></div>
</div>

下拉菜单实现原理

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

ul添加drop-down-menu 其中设置了样式idisplay:nine
且使用了绝对定位相对父元素div
点击显示菜单和隐藏菜单的原理分析：
通过js对父元素div进行添加和移除类open

.open > .dropdown-menu {
  display: block;
}

动态弹出框
两种处罚方式
模态弹出窗声明：需要两个属性，data-toggle data-target
前者必须声明为modal（触发器）
后者则设置为css选择符或者弹出窗口的id值
一般用id
链接触发：
a标签 data-toggle=“modal” href="#id"

data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示