Responsive Design with Bootstrap - zilongxuan001/LearnFreecode GitHub Wiki

Use Responsive Design with Bootstrap Fluid Containers

Bootstrap是CSS的响应式框架之一，能够测出你的屏幕宽度并自动调整元素大小，所以是一种响应式设计（Responsive Design）.

有了响应式设计，就不用需要在你的网页上设计移动端的版本，HTML会自动调整任何屏幕宽度下元素布局。

使用方法 添加以下代码到 HTML顶端

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

然后将所有的HTML放到<div></div>里，

最后添加container-fluid

<div class="container-fluid">

</div>

Make Images Mobile Responsive

在图片里添加class img-responsive，让图片自响应。

<img class="responsive">

Center Text with Bootstrap

使用Bootstrap，可以让标题元素居中。

居中的class为text-center，样式如下

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

Create a Bootstrap Button

Bootstrap有自己的按钮样式，比HTML的样式好看。

class名称为btn，样式如下

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

浏览器中显示如下 image

Create a Block Element Bootstrap Button

按钮元素加上classbtn-block，按钮的水平边界可以扩充到屏幕边上，样式如下

<button class="btn btn-block">文本</button>

注意，使用btn-block时，btn不能少。

浏览器样式如下 image

Taste the Bootstrap Button Color Rainbow

class btn-primary在APP中经常使用，尤其是你的用户经常使用的按钮时，可以添加该class。

添加btn-primary后，按钮颜色为蓝色，样式如下，

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

浏览器显示如下 image

Call out Optional Actions with Button Info

对于按钮，Bootstrap给了很多预定义的颜色。

class btn-info 用于用户可选动作的提示。颜色为浅蓝色。

样式如下

<button class="btn btn-block btn-info">Info</button>

浏览器显示如下

image

Warn your Users of a Dangerous Action

class btn-danger是一种按钮颜色，主要用于提醒用户按这个按钮的行为是具有破坏性的，比如可以删掉一张图片。

样式如下

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

浏览器中显示如下 image

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap是一个自响应的栅格系统，可以很容易地排列元素。

Bootstrap大部分的class可以用到<div></div>元素中。

下图是12列的栅格系统

image

在这个图中，用了col-md-*class。主要用于笔记本(.aptop)等中等屏幕（medium-sized-screen）

md意思是中等，medium。

*是要分成的列的数量。

我们使用col-xs-*class。主要用于手机登小屏幕（extra-small mobile phone screen）

xs 意思是extra small

*意思是要分成的列的数量。

样式1

<div class="row">
    <div class="col-xs-4">
      <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>
  </div>

则浏览器显示如下 image

样式2

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

浏览器显示如下 image

Ditch Custom CSS for Bootstrap

Bootstrap的text-primary可以设置字体颜色为蓝色，样式如下

<h2 class="text-primary">CatPhotoApp</h2>

浏览器显示如下 image

Use Spans for Inline Elements

可以用span创造行内元素。

行内元素和块水平元素区别如下图

image

使用<span></span>，可以把不同元素放在一起，甚至为同一元素的不同部分设置不同的样式。

样式举例如下

<p>Things cats <span class="text-danger">love</span>:</p>

浏览器显示如下 image

Create a Custom Heading

设计一个头部导航，就是将标题和图片放在同一行。

使用栅格，样式如下

 <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="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>

浏览器显示如下 image

Add Font Awesome Icons to our Buttons

Font Awesome是个图标库。图标是生动的载体，前缀是.svg。

这些图标可以想字体一样对待，用px改变大小。

要想使用Font Awesome，先把下列代码放在HTML顶端

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

i元素最开始是用来把其他元素变成斜体现在最常用来表示图标。

样式1

<i class="fa fa-info-circle"></i>

样式2

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

浏览器显示如下 image

Add Font Awesome Icons to all of our Buttons

添加两个图标

样式如下

<button class="btn btn-block btn-info"><i class="fa fa-info-circle">Info</i></button>

<button class="btn btn-block btn-danger"><i class="fa fa-trash">Delete</i></button>

浏览器显示如下 image

Responsively Style Radio Buttons

利用栅格，将单选按钮分成两列，样式如下

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

浏览器显示如下

image

Responsively Style Checkboxes

用栅格，把复选框分为3列，样式如下

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

浏览器显示如下 image

Style Text Inputs as Form Controls

在form表单的<input>里加入class form-control，可以让input文本框横向满屏。

样式如下

<input  class="form-control" type="text" placeholder="cat photo URL" required>

浏览器显示如下

image

另外，在form的button里加入class btn btn-primary和<i></i>的class fa fa-paper-plane `

样式如下

<button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane">Submit</i></button>

浏览器显示如下 image

Line up Form Elements Responsively with Bootstrap

把表单里的input和button放在同一行，使用Bootstrap使其自响应。

样式如下

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

浏览器中显示如下 image

Create a Bootstrap Headline

练习HTML，CSS和Bootsrap技能，为学习jQuery做准备。

首先建立h3标题，文本为jQuery Playground，class为text-primary text-center

内容如下

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

浏览器显示内容如下 image

House our page within a Bootstrap Container Fluid Div

将h3放入div里，并加上响应式框架。

内容如下

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

浏览器显示如下 image

Create a Bootstrap Row

目的

为行内元素创建一个Bootstrap行。

方法

在h3下建立div元素，加上class row

内容


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class=row>
    
  </div>

</div>

##浏览器显示如下 image

Split your Bootstrap Row

目的

现在我们有了Bootstrap行，现在把它分为两列，以用来放元素。

方法

在行里加两个div元素，以及两个class col-xs-6

内容


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>

  </div>
</div>

浏览器显示

image

Create Bootstrap Wells

目的

Bootstrap有个class叫well，可以为列创造一个视觉效果。

方法

在div元素的col-xs-6里加上well

##内容


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        
      </div>

    </div>
    <div class="col-xs-6">
      <div class="well">
        
      </div>

    </div>
  </div>
</div>

浏览器显示

image

Add Elements within your Bootstrap Wells

目的

现在咱们行的列里有了几个div元素，现在添加几个button元素。

##方法 在带有classwell的div下面，分别加上三个元素。

##内容


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button></button>
        <button></button>
        <button></button>
      </div>
      
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button></button>
        <button></button>
        <button></button>        
      </div>
    </div>
  </div>
</div>

浏览器显示如下 image

Apply the Default Bootstrap Button Style

介绍

Bootstrap有一个button的class叫做btn-default

##方法 把btn和btn-default放入button元素里

##内容


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
        <button class="btn btn-default"></button>
      </div>
    </div>
  </div>
</div>

浏览器显示

image

Create a Class to Target with jQuery Selectors

介绍

不是每一个class都是为了响应CSS。

有时我们创建class只是有目的的选择这些元素，以便于使用jQuery。

方法

每个button里加上class target

代码


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>

浏览器显示

image

Add ID Attributes to Bootstrap Elements

介绍

除了增加class属性外，还可为每个元素增加id属性。

每个id只属于一个元素，只能在每个页面上使用一次。

##方法 在每个带 classwell的div里加上id。

##代码


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well" id="left-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well" id="right-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>

##浏览器显示 image

Label Bootstrap Wells

目的

为了更清晰一点，在带id的weill上打个标签

方法

在left-well，带有class col-xs-6的div里，加上h4，文本为#left-well

相应的，在right-well也添加类似的内容。

代码


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
    <div class="col-xs-6">
      
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
        <button class="btn btn-default target"></button>
      </div>
    </div>
  </div>
</div>

浏览器显示如下

image

Give Each Element a Unique ID

##目的 为了让jQuery可以对每个button进行定位，可以使用id

##方法 每个button里加上id，从target1 到target2

##代码


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1"></button>
        <button class="btn btn-default target" id="target2"></button>
        <button class="btn btn-default target" id="target3"></button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id=target4></button>
        <button class="btn btn-default target" id=target5></button>
        <button class="btn btn-default target" id=target6></button>
      </div>
    </div>
  </div>
</div>

##浏览器显示 image

Label Bootstrap Buttons

目的

就像我们给well打标签，我们也可以给button打标签。

方法

给你的每个button元素里，加上相应的id选择器的文本。

代码


<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

##浏览器显示

image

Use Comments to Clarify Code

目的

当你开始使用jQuery，可以直接修改HTML元素，而不用实际在HTML改变。

让我们确定每个人都知道不应该直接改变代码。

方法

使用<!-- -->，

代码


<!-- Only change code above this line-->
<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

浏览器显示

image

| Wiki Home | Code | Issue |Projects |FreeCodeCamp|CodePen |Head First HTML& CSS |Responsive Web Design Certification (300 hours)

⚠️ **GitHub.com Fallback** ⚠️