Bootstrap Basics

BootStrap适合做什么
======

Bootstrap适合做没有界面设计,只有功能或者草图,直接通过代码快速的生成一个可用的界面

Bootstrap不适合

1. 已经有了良好的界面设计,包含了各种细节
2. 在已有的非Bootstrap的界面上进行改动的时候

# headers
add this to headers ``

# grid system

## container
`container` class should be added to the root element where you would like to use bootstrap.

`container-fluid` is for full-width container.

## row

from the official documentation:

> * Content should be placed within columns, and only columns may be immediate children of rows.
> * Columns create gutters (gaps between column content) via **padding**. That padding is offset in rows for the first and last column via negative margin on `.rows`.
> * Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. grid classes are `col-xs-*`, `col-sm-*`, `col-md-*`, `col-lg-*`.

| | phone | tablet | desktop | large desktop|
|————-|——-|——–|———|————–|
|Container width | None (auto) |750px |970px |1170px|
|Class prefix |`.col-xs-` |`.col-sm-` |`.col-md-` |`.col-lg-`|

The gutter width for bootstrap is `15px` for each column, `30px` between.

generally, you should use the `col-sm-N` family of classes. such that it applies for all devices except phones.

use `col-xs-offset-*` classes to offset the columns.

use `col-xs-pull-*` classes to pull column to left, and `push` to push to right.

# 安装

引入 CSS 和 JS 就好啦,不过限于国内的网络条件,可能做好还是下载到自己服务器吧。

“`




“`

# starter template

“`






Hello, world!

Hello, world!







“`
bootstrap 默认已经采用了 border-box 模式。如果需要使用 content-box 需要自己指定。

About 逸飞

后端工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注