BS常见DOM结构

由BS常见DOM结构,理解BS。

表单结构

1
2
3
4
5
<!-- 含有文本框的表单控件-->
<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
1
2
3
4
5
6
<!-- 含有单选或复选的表单控件 -->
 <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
 </div>
1
2
3
4
5
6
7
<!-- 按钮实现、按钮类型属性 -->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
        <!--<input type="image" /> 定义图像形式的提交按钮-->
<input type="image" src="http://www.w3school.com.cn/i/eg_submit.jpg" alt="Submit" />
1
2
3
4
5
6
<!-- 悬浮影响伪元素 -->
#imghover a:hover:after{
	top:50%;
	margin-top:-15px;
	opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}
.row {
    margin-right: -15px;
    margin-left: -15px
}
<!-- 相对定位、内补(基类) 被其他类继承-->
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    float: left
}
.col-xs-3 {
    width: 25%
}
<!-- 通过相对定位的left、right实现平移排序 -->
.col-xs-pull-3 {
    right: 25%
}
.col-xs-push-3 {
    left: 25%
}
<!-- 列偏移通过 -->
.col-xs-offset-3 {
    margin-left: 25%
}
1
2
3
4
5
6
7
8
9
.table-bordered {
    border: 1px solid #ddd
}

.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,.table-bordered>thead>tr>th {
    border: 1px solid #ddd
}
1
2
3
4
5
<!-- 多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开 -->
background-image: linear-gradient(#5f5f5f, #5f5f5f), linear-gradient(#d2d2d2, #d2d2d2);
background-size: 0 2px,100% 1px; 
background-repeat: no-repeat;
background-position: center bottom, center calc(99%);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.checkbox,.radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px
}

.checkbox label,.radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer
}

.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],
.radio input[type=radio],.radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: -20px
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 建议将输入框组嵌套到表单组中使用 -->
<div class="form-group">
   <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
   <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
   </div>
</div>
       <!-- 样式 -->
.form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10
@media (min-width: 768px) {
   .form-horizontal .control-label {
      padding-top:7px;
      margin-bottom: 0;
      text-align: right
          }
      }
      .collapse {
    display: none
}
1
2
3
4
5
6
7
8
9
10
<!-- 内联单选和多选框 -->
<label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
1
2
<!--按钮的链接样式：Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!-- 响应式工具类 -->
.visible-lg,.visible-md,.visible-sm,.visible-xs {
    display: none!important
}

.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,
.visible-md-block,.visible-md-inline,.visible-md-inline-block,
.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,
.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block {
    display: none!important
}

@media (max-width: 767px) {
    .visible-xs {
	display:block!important
    }

    table.visible-xs {
	display: table!important
    }

    tr.visible-xs {
	display: table-row!important
    }

    td.visible-xs,th.visible-xs {
	display: table-cell!important
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
	display:block!important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
	display:inline!important
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
	display:inline-block!important
    }
}

@media (max-width: 767px) {
    .hidden-xs {
	display:none!important
    }
}

@media (min-width: 768px) and (max-width:991px) {
    .hidden-sm {
	display:none!important
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .hidden-md {
	display:none!important
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
	display:none!important
    }
}
1
2
3
4
5
6
7
 <!-- 1px的高度 -->
.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}
1
2
3
4
5
6
<!-- bottom的100%的参考对象 -->
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px
}
1
	
1
2
3
4
5
<!-- 伪类的使用 -->
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 两端对齐排列的按钮组 -->
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate
}

.btn-group-justified>.btn,.btn-group-justified>.btn-group {
    display: table-cell;
    float: none;
    width: 1%
}

.btn-group-justified>.btn-group .btn {
    width: 100%
}
1
2
3
4
5
6
7
//导航条
<nav class="navbar navbar-default">
	<!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">...</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" >...</div>
</nav>
1
2
3
4
5
6
7
//导航按钮样式
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>
1
2
.navbar-inverse .btn-link[disabled]:focus{}
.navbar-right~.navbar-right {}  //通用兄弟选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
       //输入框组
.input-group[class*=col-] {
    float: none;
    padding-right: 0;
    padding-left: 0
}
.input-group .form-control,.input-group-addon,.input-group-btn {
    display: table-cell
}

.input-group-addon,.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle
} 
.input-group-btn>.btn+.btn { //相邻兄弟选择器
    margin-left: -1px
}
1
2
3
4
5
6
7
8
9
.breadcrumb>li {
    display: inline-block
}
//content属性的使用	
.breadcrumb>li+li:before {
    padding: 0 5px;
    color: #ccc;
    content: "/\00a0"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//实体的使用
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
	<span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
	<span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
1
2
3
4
5
6
7
8
9
10
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}
//li变成了inline了 	
.pagination>li {
    display: inline
}
1
2
3
4
5
6
7
8
//:empty 选择器匹配没有子元素（包括文本节点）的每个元素。 IE8 不支持 :empty 选择符。
.label:empty {
    display: none
}
//包含[href]属性
.label-default[href]:focus,.label-default[href]:hover {
    background-color: #5e5e5e
}
1
2
3
4
5
6
7
8
9
10
11
       //导航的三道杠
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//进度条 动画 background-position、background-image属性使用 默认是repeat
@keyframes progress-bar-stripes {
    from {
	background-position: 40px 0
    }

    to {
	background-position: 0 0
    }
}

.progress-bar-striped,.progress-striped .progress-bar {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 40px 40px
}

.progress-bar.active,.progress.active .progress-bar {
    animation: progress-bar-stripes 2s linear infinite
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//媒体对象中的媒体类型可以顶部、中部或底部对齐 
.media-body,.media-left,.media-right {
    display: table-cell;
    vertical-align: top
}

.media-middle {
    vertical-align: middle
}

.media-bottom {
    vertical-align: bottom
}
.media-list {
    padding-left: 0;
    list-style: none
}
1
2
3
4
5
       //列表组 也可以去掉list-style?
.list-group {
    padding-left: 0;
    margin-bottom: 20px
}
1
2
3
4
//inherit属性 给链接设置合适的颜色
.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a {
    color: inherit
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//透明度
.fade {
    opacity: 0;
}

.fade.in {
    opacity: 1
}
//显示、隐藏	
.collapse {
    display: none
}

.collapse.in {
    display: block
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//实现方式  height为0 padding的值
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%
}

.embed-responsive-4by3 {
    padding-bottom: 75%
}
1
2
```
```html

Comments

去留言
2016-04-17
⬆︎TOP