Bootstrap Practice

Bootstrap的介绍,此处省略一万字~

http://getbootstrap.com/
Bootstrap中文网

Bootstrap的优势

在去FCity前,我很少写CSS,浏览器那些烂事有所听闻,但一副关我毛事的心态,但作为C#的后端到了FCity之后,竟连续修了一年的CSS Bug,然后由怨生恨,从此对CSS再也不愿多看一眼。

直到…

虽然我没有做前端工程师的意愿,但Bootstrap的应用让我对CSS的偏见少了许多,至少目前我觉得我也能做出一个漂亮的Web页面,标准的结构代码,Grid可以快速定义框架,各种好用的排版定位,瞬间让UI变得好看的控件样式(Table, Form Control, Button…)。一下觉得世界变得美好起来。

所以决定写上Blog,记录下来使用过程中那些优秀的实践,对,我最热爱最佳实践~

开始之前

在设计阶段,就应该按照Bootstrap所提供的Grid进行设计,这样方便后期开发,网上有很多的Grid PSD Template,放在下面用就是了。

Bootstrap 3 responsive grid psd templates

开始

Bootstrap 提供了一个最基础的模板,这让开始变得更加简单起来。不过Bootstrap只支持IE9等现代浏览器,对于IE8,可以通过html5shiv.js, respond.js,再低版本的IE,就不提供支持了。

Rails

在Rails中如何使用Bootstrap呢,首先,我们会先建一个叫framework_and_overrides.css.scss的文件,在application.css.scss中引入该文件:

1
*= require framework_and_overrides

该文件主要是用引入bootstrap,也可以部分引入:参见:然后对bootstrap进行扩展。关于扩展,下面有更多的讲解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* import the CSS framework */
@import "bootstrap";
@import "jasny-bootstrap";
/* 也可以按需求,用部件的方式@import 入自己所需要的部分。 */
/* 下面可以对Bootstrap进行扩展,比如改变pagination的颜色。*/
.pagination.custom > li > a,
.pagination.custom > li > span {
color: #faa339;
border-color: #faa339;
}
.pagination.custom > li > a:hover,
.pagination.custom > li > a:focus,
.pagination.custom > li > span:hover,
.pagination.custom > li > span:focus,
.pagination.custom > li.active > a,
.pagination.custom > li.active > span {
background: #faa339;
border-color: #faa339;
color: #fff;
}

布局

按照传统的Head, Nav, Content, Footer方式的网页。

container

.container 是固定宽度的
.container-fluid则是会根据拉申来变化的。一般用于Header和Footer那种满屏的效果。

row

co-md?-x

参见:

Elements

最让人喜欢的还是Bootstrap所提供的那些控件,每次写出来的Web都挤在一起,拿出去给别人看都不好意思,自从加了一些简单的样式后,Form立即撑满了,有那种非洲难民吃饱饭变精神的感觉。

控件没什么好举例的,教程写的也很清楚。如Table:Form:, Button:

看完Bootstrap后,觉得有一点就特别的好,就是xxx,像Button, 它提供了基本clas: btn,然后大小方面,提供了btn-xs,btn-lg等class,在色彩方面,提供了btn-sucess, btn-info等class,通过这些class的组合,你就可以显示出一个想要的按钮。

扩展

再好的东西也不可能全部满足需求,比如说要做一个青色的Button,怎么样才是一个最好的方式呢?

第一种方式,我们可以编辑.Variant 变量定义文件,找到一个btn-default,给改成自己想要的值。但这种方式极度不推荐,作为一个库的使用者,第一原则就是永远不要改动库的本身,永远只是扩展而不是修改。

那第二种方式就是扩展了。好在有Less和SASS,我们可以用这种语法快速的定义出自定义的class

举例:定制btn

1
2
3
4
.btn-custom {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}

看编译后的CSS代码的话,可以看到这句话为我们生成了以下的CSS代码。当然了,也可以自己手工写CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.btn-custom {
background-color: #08c;
border-color: #08c;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #0077b3;
border-color: #006699;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #08c;
border-color: #08c;
}

参见

http://www.tutorialspoint.com/bootstrap/bootstrap_helper_classes.htm

.clearfix 清除浮动

CSS之关于clearfix–清除浮动

.text-left …

等一系列超级好用的方法集合。

禁掉响应式布局

如何做普通的非响应式的网页,官方网站有介绍,如何禁止响应式布局来讲,他们也提供了一个示例:非响应式布局实例

通过对non-responsive.css的查看可以发现,它主要是重写了.container

超级好用插件推荐

1. Jasny Bootstrap - 超级好用的File(Image) Uploader

http://jasny.github.io/bootstrap/javascript/

FAQ::

Q: bootstrap-theme.min.css 用途
A:

Q:即然Grid都是按百分比来计算的,那xs, xm有区别吗?
A:

Q: Media Queries
A: Bootstrap 3 Media Query BreakpointsMedia Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.
@media (min-width:500px) { … }

Theme

主题和扩展不同,主题就是要对已存在的设置进行覆盖,达到换肤的功能。

Generator

Themples

免费/收费Themples

Admin 专题

REF::