Free Code Camp 知识点整理：Responsive Design with Bootstrap

最新推荐文章于 2024-07-28 22:27:20 发布

vincenteL

最新推荐文章于 2024-07-28 22:27:20 发布

阅读量815

点赞数

分类专栏： Free code camp 文章标签： freecodecamp 前端

Free code camp 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

# Free Code Camp

第二节 Front End Development

二、Responsive Design with Bootstrap

1.Use Responsive Design with Bootstrap Fluid Containers

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
  .smaller-image {
    width: 100px;
  }
</style>
<div class=container-fluid>
<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality"> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Crazy</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

现在让我们回到我们的Cat Photo应用。这次，我们将用流行的响应式框架Bootstrap来美化它。
Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

首先，我们需要把所有的HTML内容放在class为container-fluid的div下。

2.Make Images Mobile Responsive

<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>
<img class="img-responsive" src=/images/running-cat.jpg>

首先，在已有的图片下方添加一张新的图片。将它的src属性设置为 /images/running-cat.jpg。
如果图片的尺寸刚好等于我们手机的尺寸，那想必是极好的。
通过Bootstrap，我们要做的只是给图片添加img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

3.Center Text with Bootstrap

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

既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。我们所要做的只是把text-center class属性添加给h2元素。

4.Create a Bootstrap Button

<img src="/images/running-cat.jpg" class="img-responsive">
<button class="btn">Like</button>

Bootstrap有它自己的button按钮风格，看起来要比默认的按钮好看得多。

5.Create a Block Element Bootstrap Button

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

通常情况下，你的button元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
注意：这些按钮仍然需要btn class。
添加Bootstrap的btn-block class到你的按钮。

6.Taste the Bootstrap Button Color Rainbow

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

深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。
添加Bootstrap的btn-primary class属性到按钮标签上。
注意：这个按钮仍然需要btn和btn-block属性！

7.Call out Optional Actions with Button Info

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

Bootstrap自带了一些预定义的按钮颜色。浅蓝色btn-info被用在那些用户可能会采取的操作上。
在你的 “Like” 按钮下面添加一个文本为 “Info” 的块级Bootstrap按钮，并为其添加btn-info和btn-block class属性。
注意：这些按钮仍然需要btn和btn-block class属性

8.Warn your Users of a Dangerous Action

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

Bootstrap自带了一些预定义的按钮颜色。红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。
创建一个文本为 “Delete” 的按钮，并且给它添加 classbtn-danger。
注意：这些标签仍然需要btn与btn-blockclass。

9.Use the Bootstrap Grid to Put Elements Side By Side

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

Bootstrap使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap中大多数的class属性都可以设置于div元素中。
下面这张图表显示了 Bootstraps 的12列网格布局是如何起作用的：

请注意，在这张图表中，class属性 col-md-*正被使用。在这里， md表示 medium (中等的)， *代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
在我们创建的 Cat Photo App 中，将会使用col-xs-*，其中xs是extra small缩写（应用于较小的屏幕，比如手机屏幕）*是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
把Like, Info和Delete三个按钮一并放入一个<div class="row">元素中；然后，其中的每一个按钮都需要各自被一个<div class="col-xs-4">元素包裹。
当div元素设置了class属性row之后，那几个按钮便可嵌入其中。

10.Ditch Custom CSS for Bootstrap

<link href="//fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  h2 {
    font-family: Lobster, Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
</style>
<div class="container-fluid">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
  <a href="#"><img class="img-responsive thick-green-border" src="/images/relaxing-cat.jpg"></a>

现在，让我们清理一下之前的代码了，以让我们的 Cat Photo 应用看起来更简洁，用 Bootstrap内置的样式来替换我们之前自定义的样式。
删除style元素里的.red-text,p和.smaller-imageCSS声明，这样你的style留下的声明就只有 h2 和 thick-green-border。
然后删除包含死链接的 p 元素。移除 h2 元素的 red-text class 并且用 Bootstrap的 text-primary class替换之。
最后，移除第一个 img 元素的 “smaller -image” class ，替换为 Bootstrap的 img-responsive class。

11.Use Spans for Inline Elements

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

你可以用span标签来创建行内元素。还记得我们是怎样使用.btn-block来创建填满整行的按钮吗？
这张图展示了 inline 元素与 block-level 块级元素的区别：
通过使用span元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
把 “Things cats love” 中的 “love” 放到span标签下。然后为其添加text-dangerclass 来使文字变成红色。

12.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="/images/relaxing-cat.jpg"></a>
  </div>
</div>

让我们来为Cat Photo 应用做一个导航吧，把标题和惬意的猫图片放在同一行。
记住，Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。

13.Add Font Awesome Icons to our Buttons

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

Font Awesome是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将Font Awesome图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
i元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将Font Awesome中的 class 属性添加到i元素中，把它变成一个图标，比如：<i class="fa fa-info-circle"></i>
你可以通过Font Awesome库增加一个 thumbs-up 图标到你的 like 按钮中，方法是在i 元素中增加class属性fa和fa-thumbs-up。

14.Add Font Awesome Icons to all of our Buttons

<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
  </div>
  <div class="col-xs-4">
    <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
  </div>
</div>

使用Font Awesome分别为你的info按钮添加info-circle图标，为你的delete按钮添加trash图标。

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

你还可以将 Bootstrap的col-xs-*用在form元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。
将页面中的两个单选按钮放置于一个<div class="row">元素中。然后，添加<div class="col-xs-6">元素并分别包裹每一个单选按钮。

16.Responsively Style Checkboxes

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

你还可以将Bootstrap的col-xs-*用在form元素中。这样我们的复选框就可以均匀地在页面上展开了，不管屏幕的分辨率是多大。
将你所有的复选框都放置于一个<div class="row">元素中。然后分别把每个按钮都放置于一个<div class="col-xs-4">元素中。

17.Style Text Inputs as Form Controls

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

你可以在你的button提交按钮上添加Font Awesome的fa-paper-plane图标，方法是在元素中增加<i class="fa fa-paper-plane"></i>。
给你表单的文本输入框增加classform-control。在你的表单提交按钮中增加classbtn btn-primary。同样，在这个提交按钮中增加Font Awesome的fa-paper-plane图标。

18.Line up Form Elements Responsively with Bootstrap

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

现在让我们把input元素和提交按钮button放到同一行。我们将用和之前一样的方法：通过使用拥有rowclass属性的div元素和其它在它之内的具有col-xs-*class属性的div元素。
将你的表单中的input文本框和提交按钮button放到一个具有rowclass属性的div元素中。将你的input放置于class为col-xs-7的div元素中。将你的表单的提交按钮button放置于class属性为col-xs-5的div元素中。

19.Create a Bootstrap Headline

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

现在，让我们从头开始练习我们的HTML, CSS 和 Bootstrap技术。
我们将会搭建一个 jQuery playground，它也即将在我们接下来的 jQuery 课程中被投入使用。
首先，创建一个h3元素，并且包含文本内容jQuery Playground。
在h3元素中设置Bootstrap的 class 属性text-primary为其上色，同时增加 Bootstrap的 class 属性text-center使文本居中显示。

20.House our page within a Bootstrap Container Fluid Div

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

现在让我们确保页面里所有的内容都是响应式的。
让我们将h3元素放置于一个class属性为container-fluid的div元素中。

21.Create a Bootstrap Row

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

现在将要为我们的内联元素创建一个 Bootstrap行。
在h3标签下创建一个div元素，并且带有 class 属性row。

22.Split your Bootstrap Row

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

既然我们已经有了一个 Bootstrap行，让我们来把它分成两栏来放置我们的元素吧。
在你的行内添加两个div元素，每个都具有col-xs-6class 属性。

23.Create Bootstrap Wells

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

Bootstrap有一个 class 属性叫做well，它的作用是为设定的列创造出一种视觉上的深度感（一种视觉上的效果，动手写代码体会一下）。
在你的每一个class为col-xs-6的div元素中都嵌入一个带有well class 属性的div元素。

24.Add Elements within your Bootstrap Wells

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

现在我们已经在行内的每一列都嵌套了好几层div元素了。这已经足够了。现在让我们添加button元素吧。
在每一个well div元素下放置三个button元素。

25.Apply the Default Bootstrap Button Style

        <button class="btn btn-default"></button>

Bootstrap还有一种属于按钮的 class 属性叫做btn-default。
为你的每一个button元素增加两个 class 属性:btn和btn-default。

26.Create a Class to Target with jQuery Selectors

        <button class="btn btn-default target"></button>

并不是每一个 class 属性都是用于 CSS 的。有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
为你的每一个button都添加target class。

27.Add ID Attributes to Bootstrap Elements

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

回忆一下，我们除了可以给元素增加 class 属性，还可以给你的每个元素增添一个 id 属性。
每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。
现在给我们每个包含 class well 的div元素一个唯一的 id。
记住，你可以像这样赋予一个元素 id：<div class="well" id="center-well">
给左边的 well 赋予 id left-well。给右边的 well 赋予 id right-well。

28.Label Bootstrap Wells

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

让我们为我们的 wells 都标上它们的 id 吧。
在 left-well 之上，class为col-xs-6的div元素里面，添加一个文本为#left-well的h4元素。
在 right-well 之上，class为col-xs-6的div元素里面，添加一个文本为#right-well的h4元素。

29.Give Each Element a Unique ID

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

我们也可以使用jQuery并通过每个按钮各自唯一的 id 来标识出它们。
给你的每一个按钮一个唯一的 id ，以target1为开始，target6为结束。

30.Label Bootstrap Buttons

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

正如我们标注了每个 wells，我们同样想要标注每一个按钮。
为你的每个button元素选择与其 id 选择器相同的文本。

31.Use Comments to Clarify Code

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