顶部信息栏,显示网站标题、Logo等资

分享bootstrap学习笔记心得(组件及其属性)

5/30/2017 Source:Backyard [comment]


1.1栅格系统

1、栅格系统是一种行和列构成的一种布局。随着,屏幕分辨率的变大,最多可展示12个列。

PC端:

PAD端:

手机终端:

2、栅格参数:

col-lg-*:(屏幕>=1200px) PC
col-md-*:(992px-1200px)
col-sm-*:(768px-992px)小平板
col-xs-*:(小于768px)手机

3.代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container"style="border:1px solid red;">
 <div class="row">
  <div class="col-lg-3 col-sm-4 col- xs-6">
   <div class="thumbnail">
    <img src="img/codeguide.png">
    <h2>靠谱研究所</h2>
    <p>我们的口号是:靠谱、有趣、有料</p>
   </div>
  </div>
  <div class="col-lg-3 col-sm-4 col- xs-6">
   <div class="thumbnail">
    <img src="img/codeguide.png">
    <h2>靠谱研究所</h2>
    <p>我们的口号是:靠谱、有趣、有料</p>
   </div>
  </div>
 </div> 
 </div>

1.2辅助类

1.文本颜色:

?
1
2
3
4
5
6
<span style="white-space:pre"> </span> <h1 class="text-primary">text-primary靠谱研究所</h1>
  <h1 class="text-success">text-success靠谱研究所</h1>
  <h1 class="text-warning">text-warning靠谱研究所</h1>
  <h1 class="text-danger">text-danger靠谱研究所</h1>
  <h1 class="text-info">text-info靠谱研究所</h1>
  <h1 class="text-muted">text-muted靠谱研究所</h1>

2、背景颜色:

?
1
2
3
4
5
6
<span style="white-space:pre"> </span> <h1 class="bg-primary">text-primary靠谱研究所</h1>
  <h1 class="bg-success">text-success靠谱研究所</h1>
  <h1 class="bg-warning">text-warning靠谱研究所</h1>
  <h1 class="bg-danger">text-danger靠谱研究所</h1>
  <h1 class="bg-info">text-info靠谱研究所</h1>
  <h1 class="bg-muted">text-muted靠谱研究所</h1>

3、关闭按钮&三角图标:

?
1
2
3
4
<span style="white-space:pre"> </span> <!--关闭按钮-->
  <button class="close"><span>×</span></button>
  <!--三角图标-->
  <span class="caret"></span>

4、快速浮动:

左浮动:pull-left

右浮动:pull-right 清除浮动:clearfix

浮动会将块元素转换成行内元素

?
1
2
<div class="pull-left bg-primary">这是左边的内容</div>
 <div class="pull-right bg-danger">这是右边的内容</div>

  5、块元素居中、文字居中:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--块元素垂直居中-->
 <style>
  #div2{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);//平移
  }
 </style>
<span style="white-space:pre"> </span><!--实现块元素水平居中-->
 <div id="div1"class="center-block text-center"style="width:500px;border:1px solid red;">块元素水平居中</div>
 <!--实现块元素垂直居中-->
 <div id="div2"class="center-block text-center"style="width:500px;border:1px solid red;">块元素垂直居中</div>

1.3表格

1.表格颜色:active,warning,danger,info,danger

2.鼠标悬停效果:table-hover

3.带边框表格:table-bordered

4.各行换色:table-striped

?
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
<table class="table table-striped table-hover table-bordered"><!--隔行换色、鼠标悬停、表格边框-->
   <thead>
    <tr class="danger"><!--表格颜色-->
     <th>姓名:</th>
     <th>性别:</th>
     <th>年龄:</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>张三</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>张三</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>张三</td>
     <td>男</td>
     <td>23</td>
    </tr>
   </tbody>
  </table>

1.4列表:

class属性:ul:list-group

li:list-group-item 徽章:span:badge                                                                                            

 列表项颜色:list-group-item-(success/warning/danger)

?
1
2
3
4
5
6
7
8
9
<ul class="list-group">
 <li class="list-group-item">
 靠谱研究所
 <!--列表徽章--><span class="badge">10</span>
 </li>
 <li class="list-group-item list-group-item-success">IT研究所</li>
 <li class="list-group-item list-group-item-warning">美食研究所</li>
 <li class="list-group-item list-group-item-info">美妆研究所</li>
</ul>

1.5表单:

表单分组:form-group

表单项:(input/span/textarea):form-control

?
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
<style>
 .container{
  width:450px;
  height:300px;
  background:#ffffff;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:20px;
 }
 </style>
<span style="white-space:pre"> </span><form role="form">
   <h3 class="text-center">靠谱研究所后台管理系统</h3>
   <div class="form-group has-success has-feedback">
    <labelfor="user">用户名</label>
    <input type="text"id="user"placeholder="请输入用户名"class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
   </div>
   <div class="form-group has-error has-feedback">
    <labelfor="pass">密码</label>
    <input type="text"id="pass"placeholder="请输入密码"class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
   </div>
   <div class="checkbox">
    <label>
     <input type="checkbox">请记住我
    </label>
   </div>
   <button type="submit"class="btn btn-success btn-block">提交</button>
  </form>
Last: LINQ
Next: Last Page