响应式页面

把下面的链接添加到你需要使用 Bootstrap 来进行布局的应用的头部：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>

需要把所有的 HTML 内容放在一个包含有container-fluidclass 名称的div下。

图片自适应

我们只要给图片添加 img-responsive 的 class 属性,图片的宽度就能自动适配你手机屏幕的宽度

使文本居中

我们只需要给h2标签添加text-center的 class 属性,标题文字就可以居中了

添加一个按钮

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

块级元素

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

为按钮添加颜色

<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>

页面布局

<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>

自定义 CSS

使用 Bootstrap span 标签来创建行内元素

Top 3 things cats hate:

使用 Bootstrap 设计一个头部导航

<div class="row">
    <div class="col-xs-8">
        <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
        <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
    </div>
</div>

在按钮上使用 Font Awesome 图标

Font Awesome 是一个方便的图标库。 这些图标都是矢量图形，以.svg 文件格式存储。
precondition

<link rel =“stylesheet”href =“// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>

example:

<button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></button>
<button class="btn btn-block btn-info">Info<i class="fa fa-info-circle"></i></button>

使用 Bootstrap 响应式单选按钮

<div class="row">
    <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    </div>
</div>

使用 Bootstrap 响应式复选框

<div class="row">
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Loving</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Lazy</label>
</div>
<div class="col-xs-4">
<label><input type="checkbox" name="personality"> Crazy</label>
</div>
</div>

使用 Form Controls 设置输入框样式

<input type="text" placeholder="cat photo URL" class="form-control" required>
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>

使用 Bootstrap 水平排列的表单

Submit

使用 Bootstrap 创建一个头部标题

<h3 class="text-primary text-center">jQuery Playground</h3>

使用 Bootstrap 设置一个 div 容器为响应式的

<h3 class="text-primary text-center">jQuery Playground</h3>

添加一个 Bootstrap 行容器

分割 Bootstrap 行容器

添加 Bootstrap well 容器