学习前端之路（一）

为了让自己能够记下一些常用的知识，特此写下来mark，以便渣渣的自己随时查阅。

今天开始做第一个项目，听说很简单，那就假装很简单吧。Build a Tribute Page.

需要使用到Bootstrap框架。

1、container

Bootstrap 固定布局

如果您想要创建基于固定像素数的网页或 app，请看这部分的教程。

用法

   class="container">
    ...
  

解释

bootstrap.css（位于 bootstrap 的主文件夹的 docs\assets\css 下）的第 261 到 273 行，为创建主容器渲染样式，从而创建一个固定布局。固定布局的目的是为网页或 app 创建一个 940 像素（默认）宽的布局。

Bootstrap 固定布局的实例

下面的代码创建一个网页固定布局。为了定制，除了默认样式，还需创建一个新的 css 文件 example-fixed-layout.css，与 bootstrap.css 位于同一个文件夹下。

2、Jumbotron

Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

• 创建一个带有 class .jumbotron. 的容器
  。
• 除了更大的

  ，字体粗细 font-weight 被减为 200。

实例

< div class = " container " >
  < div class = " jumbotron " >
  < h1 > 欢迎登陆页面！ h1 >
  < p > 这是一个超大屏幕（Jumbotron）的实例。 p >
  < p > < a class = " btn btn-primary btn-lg " role = " button " > 学习更多 a > p >
div >
div >

3、thumbnail

Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：

• 在图像周围添加带有 class .thumbnail 的 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

4、

class="caption text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.

竟然可以这么用。。

5、http://v3.bootcss.com/css/#grid（bootstrap css文档）