bootstrap学习笔记（一）

Posted on | In |

Bootstrap:响应式框架,它会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念

常用APIs

引入

1
2
3
4
5
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<div class="container-fluid">
...
</div>

使图片适配手机显示

使文本居中

可以用空格和已有的class区别开

1
<h2 class="red-text text-center">your text</h2>

添加一个按钮

1
<button class="btn">Like</button>

添加块级元素(block)按钮

匹配父容器的按钮

1
<button class="btn btn-block">Like</button>

给按钮添加颜色

1
2
(深蓝色)<button class="btn btn-block btn-primary">Like</button>
(浅蓝色)<button class="btn btn-block btn-info">Info</button>

添加一个Bootstrap警告按钮

1
<button class="btn btn-block btn-danger">Delete</button>

使用Bootstrap做页面布局

响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

1
2
3
4
5
6
7
8
9
<div class="row">
    
    <div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>

    <div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div>

    <div class="col-xs-4"><button class="btn btn-block btn-danger">Delete</button></div>
    
  </div>