Bootstrap 使用

bootstrap模板为使IE六、7、8版本（IE9如下版本）浏览器兼容html5新增的标签，引入下面代码文件便可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
同理为使IE六、7、8版本浏览器兼容css3样式，引入下面代码： <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

【省略细节，纠结细节的话就学不了整个复杂系统，何况现代前端开发不是仅仅就一个Bootstrap】【不学js插件只学样式】【关注使用有问题再深究】

 

Refs 

 

第一步 【全局样式 normalize.css】抹除浏览器差别 

 

…………………………………………………………………………………………………………

【标题】.h1~.h6 类名 和 标签 <h1> 相同效果。

【副标题】  <h1><small>

【强调】.lead 

【粗体】<b> | <strong>

【斜体】<i> | <em>

【有颜色的强调】

 

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

【文本对齐】

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {//中文慎用 以及 浏览器解析不一致。
text-align: justify;
}

………………………………………………………………………………

【列表】

去编号 去点 列表

 

.list-unstyled {
padding-left: 0;
list-style: none;
}

 

去编号 改内联块级

 

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

【水平 定义列表】

dl-horizontal 媒体查询 宽度是768px以上奏效。

 

【代码】

单行 <code>

多行 <pre>   +  滚动条 .pre-scrollable

用户键盘输入 <kbd>

 

【表格】

  ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

  ☑  .table-hover：鼠标悬停高亮的表格

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

 

修饰 行

active 

info

success

warning

danger

 

………………………………………………………………………………

【表单】Fucking importance

【经常使用样式】.form-control

一、宽度变成了100%

二、设置了一个浅灰色（#ccc）的边框

三、具备4px的圆角

四、设置阴影效果，而且【元素获得焦点】之时，阴影和边框效果会有所变化

五、设置了placeholder的颜色为#999

 

【html 5 新增】role="form"  告诉设备这一块扮演的是表单角色。

【对表单 分组】<div class="form-group" 这是惯性作法，为了咱们想要方便变换样式，例如基本表单 => 内联表单

 

【水平表单】form-horizontal 应用这个类会改变form-group样式

【内联表单】form-inline

内联表单的 label 经常设置 sr-only 类名 ，sr 是 屏幕阅读器的缩写，意思是照顾不方便的人士。

 

【下拉框】<select><option>

　　【多行模式】<select multiple><option>

【文本区域】<textarea rows="3"> 若是应用.form-control就不用再设置cols属性，由于已经100%显示。

【单选框和复选框在Bootstrap要跟包饺子同样使用】

<div class="checkbox">   <!-- 这里无所谓 checkbox 也能够是 form-group 只要包饺子。 -->

<label>

　　<input type="checkbox"> 记住密码

</label>

</div>

【水平单选、复选框】label应用.radio-inline类名或者checkbox-inline便可。

 

【按钮】btn

【有颜色的按钮】btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link

【为保证各大浏览器解析建议使用】<button>和 <a> 

【按钮大小】btn-xs btn-sm btn-lg 

【块级按钮 占满容器】btn-block

【有状态的按钮】活动状态有三种 :hover :active :focus ，另外就是禁用 添加disabled属性便可。

………………………………………………………………………………………………………………

【表单控件大小控制】Bootstrap 提供了 .input-sm .input-sg 对控件高度进行控制。

要对高度进行控制，使用 网格系统 提供的 .col-xx-<number>。

【表单控件焦点状态】.form-control

【表单控件禁用状态】加属性 disable

　　【禁用整个表单】<fieldset disable></fieldset> 

 　　　【特别的fieldset disable管不到灰暗带】<legend><input>，不过把 submit 关掉也是白搭。

【表单控件验证状态】+【表单控件提示】

 <div class="form-group has-error has-feedback">
    
    <label class="control-label" for="email">email地址</label>
    
    <input type="text" class="form-control" id="email" placeholder="在这里输入你的email地址">
　　
　　<span class="helpblock">你输入的信息是错误的</span>    

    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
</div>

 

 

……………………………………………………………………………………………………………………………………………………

【图像】<img src="https://placehold.com/140x140" alt=...

一、img-responsive：响应式图片，主要针对于响应式设计
二、img-rounded：圆角图片
三、img-circle：圆形图片
四、img-thumbnail：缩略图片

 

【图标】原理是经过@font-face加载字体

使用 http://glyphicons.com/ 搜索

经常使用 http://www.bootcss.com/p/font-awesome/

…………………………………………………………………………………………………………………………………………………………

【网格系统】 Fucking Importance

 

响应式的原理 【定义容器大小】+【事先平均分12份 / 24份 / 32份】+ 【调整下内外边距配合媒体查询】

 

boilerplate code

<div class="container">
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-8"></div>

 

 

【列组合】调整 float 和 width 百分比能够自由组合出效果。

【列偏移】col-md-offset-xx

 

<div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
    <div class="col-md-3 col-md-offset-1">.col-md-3列向右移动1列的间距</div>
</div>

 

【列排序】向右推 col-md-push-xx ，向左拉 col-md-pull-xx

………………………………………………………………………………………………………………………………………………………………