bootstrap 学习

通过这个我们可以了解bootstarp 常用的一些知识点。

栅格

• .row 在.container 或者 .container-fluid
• .col-md-* ,.col-lg-*,.col-xs-*,col-sm-*
• 列的偏移 .col-md-offset-*
• 可以嵌套，嵌套后再分为12格

排版

• h1~h6
• <small></small>
• .lead 可以让包裹的p段落凸显出来
• <mark>内链的凸显出来方案
• 无用的文本<s>
• 插入的文本<ins>
• <u>下划线
• 语句加强<strong>
• <em> 斜体
• 文本的对齐方式，text-left,text-center,text-right,text-justify,text-nowrap
• .text-lowercase,.text-uppercase,.text-capitalize 大小写以及驼峰
• 地址
• 引用：<blockquote class=".blockquote-reverse">，多引用<cite class="source Title">
• 列表<ul><li>
  有序<ol><li>
  无样式.list-unstyled
  内连.list-inline
  描述<dl><dt><dd>，水平的描述:.dl-horizontal
  使用text-overflow 可以截断太长的短语
  

代码

• 内连代码<code>
• 用于输入<kbd>
• 多行<pre>
• 变量<var>
• 程序输出<samp>
  

表格

• .table
• .table-striped斑马线
  
• .table-borded框子
  
• .table-hover鼠标悬停
  
• .table-condensed紧凑
  
• 给<tr><td>设置的颜色:.active,.success,.info,.warning,.danger
  
• 表格响应式：.table-responsive
  

表单

基础例子

1. .form-control 来修饰<input>,<textarea>,<select>，默认的宽度为100%
2. <label>包裹在div.form-group
3. 内链表单.form-inline用来修饰<form>
4. 前后扩展div.input-group-addon
5. 水平.form-horizontal
6. <textarea> 中row 属性来修饰几行
7. 多选择&单选
   1. 禁用状态div.disabled，
      
   2. div.checkbox>labl>input
   3. checkbox 的内链label.checkbox-inline,label.radio-inline
   4. 不带文字的checkbox 或者radio,就是label 包裹的时候不写label>input
8. 下拉框
   1. .form-control修饰<select>
   2. 属性multiple表示多选
9. 静态文本
   1. 使用水平.form-horizontal修饰<form>:<form class='form-horizontal'>
   2. 用栅格和.control-label来修饰<label>：<label class='col-md-2 control-label'>
10. 禁用 .disabled ，如果是checkbox 或者 radio 的时候，也要使用disabled，最好不要使用form表单中的<fieldset disabled>,原因：<a>标签不受影响
11. 只读 readonly 属性
12. 给输入框加上颜色div.has-success,div.has-warning,div.has-error
13. 给输入框加上图标
    1. <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 加上的是图标
    2. <span class="input-group-addon">@</span>加上文字
14. 设置输出框的大小input.form-control input-lg
15. 设置输出组的大小(有label的时候),div.form-group form-group-sm
    
16. 水平上的大小通过栅格设置

按钮

1. .btn 设置基础按钮样式，如背景以及点击反馈
2. 设置按钮的颜色
   1. .btn-default：白色
   2. .btn-primary：深蓝色
   3. .btn-success：绿色
   4. .btn-info:蓝色
   5. .btn-warning:黄色
   6. .btn-link:链接透明
3. 大小 .btn-lg>没有描述>.btn-sm>.btn-xs
4. 块状的框度100% .btn-block
5. 激活状态 .active
6. 禁用 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
7. a 标签的禁用<a class='diabled'>

图片

1. 圆角的，.img-round
2. 圆的，.img-circle
3. 画布.img-thumbnail
4. 图片响应式剧中 .img-responsive .center-block

辅助

文本颜色

    <p class="text-muted">...</p>
    <p class="text-primary">...</p>
    <p class="text-success">...</p>
    <p class="text-info">...</p>
    <p class="text-warning">...</p>
    <p class="text-danger">...</p>

背景颜色

    <p class="bg-primary">...</p>
    <p class="bg-success">...</p>
    <p class="bg-info">...</p>
    <p class="bg-warning">...</p>
    <p class="bg-danger">...</p>

关闭的按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
使用.close 来修饰<button>

三角

`<span class="caret"></span>`

div 的浮动

    <div class="pull-left">...</div>
    <div class="pull-right">...</div>

内容居中

<div class="center-block">...</div>
说明：

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

浮动取消

<div class='clearfix'>
说明
```css
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

// Usage as a mixin
.element {
.clearfix();
}
```

显示隐藏

1. .show
2. .hide
   说明:

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

<h1 class="text-hide">Custom heading</h1>

响应

根据屏幕宽度设置是否隐藏

1 .visible-*-*
2 .hidden-*

根据屏幕宽度设置display的属性

1. .visible-*-block：display: block;
2. .visible-*-inline：display: inline;
3. .visible-*-inline-block：display: inline-block;

---

以下为组件的知识

组件

字体

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

下拉菜单

1. 使用.dropdown修饰<div>
2. .dropdown-toggle 作为js的事件绑定
3. data-toggle 绑定div内的列表
4. dropdown-menu修饰<ul>
5. <li> 列表可以用.dropdown-header 来分组
6. 使用.divider 在分隔列表
7. 使用.disabled来禁用

按钮组

1. 用.btn-group 来修饰div
2. 包裹多个.btn-group的工具组，使用.btn-toolbar来修饰
3. 对按钮组大小设置
   1. btn-group-xs
   2. btn-group-md
   3. wu
   4. btn-group-lg
4. 垂直上的按钮 .btn-group-vertical
5. 对齐.btn-group-justified

下拉菜单

• 下拉菜单的关键在于data-toggle='dropdown'
• 使用.dropup来修饰div实现向上

导航

    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Profile</a></li>
      <li role="presentation"><a href="#">Messages</a></li>
    </ul>

1. 用nav nav-tabs 来修饰导航标签
2. 用nav nav-pills 胶囊，垂直时候加上.nav-stacked
3. 去掉间隙，加上nav-justified

导航条

1. 用navbar navbar-default来修饰div或者nav
2. 如果导航条上存在form,那么给form 表单加上navbar-form
3. 按钮navbar-btn
4. 文本navbar-text
5. 链接 navbar-link
6. 固定在顶部navbar-fixed-top或者底部 navbar-fixed-bottom
7. navbar 中可包裹一个container|container-fluid
8. 反色 navbar-inverse

路径导航

原理通过css的：before和content添加的
使用：

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

输入组

1. .input-group 修饰div
2. .input-group-addon 修饰span 加载输入框上
3. .form-control 修饰input ，表示框度为100%
4. label 标签包裹

分页

1. 使用.pagination来修饰<ul>
2. 可使用pagination-[size]来修饰大小

翻页

1. 使用.pager来修饰ul
2. 对齐使用.previous,.next来修饰上页和下页

标签

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

违章

<span class="badge">

巨幕

<div class="jumbotron">划分出空间来

面板

.panel
颜色 .panel-primary
结构：.panel-heading,.panel-body,.panel-footer

列表

.list-group 修饰<ul>

well

设置一个嵌入的效果.well

转载于:https://www.cnblogs.com/enicz/p/bootstrap-xue-xi.html