简单粗暴 Bootstrap 入门


发布于

|

分类

1. 下载

下载最新版 Bootstrap。

注意:3.0 以上版本不支持 IE7-

2. 准备模板

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title> 标题</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    ...
</body>
</html>

3. 填写内容

1. 最外层包裹

使用

<div class="container">
  ...
</div>

或者

<div class="container-fluid">
  ...
</div>

2. 分段包裹

将你的网页 “分段”,每一段用

<div class="row">
  ...
</div>

包裹

3. 每一段中的内容

在不用 bootstrap 的情况下,通常都是自己写 div 分栏,每一栏里面填写东西。

现在有了 Bootstrap,分栏的任务就交给它了。Bootstrap 采用 12 格流布局,当成 Table 用也是可以的。

每一栏用

<div class="col-AA-BB">
  ...
</div>

包裹。

注意:每一行(row)里面子元素必须为列(col),否则显示出错。所有的东西都在列里面写。列里面可以嵌套列。

AA 表示 “什么屏幕及以上使用这个效果”,BB 表示 “使用这个效果的时候这一栏是多宽”。“宽度” 为 1~12 的整数。如果 “屏幕” 小于设定,将会撑满宽度。

比如,class="col-xs-2"表示在最小屏幕及以上的设备中使用这个样式。这一栏宽度是 2。

比如,class="col-lg-6"表示在 Large 屏幕及以上的设备中使用这个样式。这一栏的宽度是 6。如果屏幕小于 Large,那么自动变成 100% 的宽度并进行堆叠(就像是没有 css 的时候那样的效果)。

如果不想每次都从最左边开始显示,那么可以设置 “列偏移”。格式为 col-AA-offset-BB。含义同上。

如果想自定义列的顺序,那么可以设置 “列排序”。格式为 col-AA-push-BB。含义同上。

好了,来一个综合一点的例子:

    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-2">
                    balabala
                </div>
                <div class="col-xs-3 col-xs-offset-3">
                    balabala
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-md-4">
                    balabala
                </div>
                <div class="col-xs-3 col-xs-offset-3 col-lg-6 col-lg-offset-2">
                    balabala
                </div>
            </div>
            <div class="row">
            </div>
        </div>
    </body>

缩小一下显示器试试。

记得加上这个,效果会明显一点

*{
    outline:1px dashed red;
}

4. 各种组件

各种组件都是 “用到哪儿写到哪儿” 的。

css 样式一股脑塞到 class=" "里面就好,样式就会叠加了。

有些是组合起来用的,有些必须有规定写法,有些是加上 style 就行。

比如,写一个按钮:

<button type="button" class="btn btn-default"> 按钮</button>

然后我想让它变一个颜色:

<button type="button" class="btn btn-info"> 按钮</button>

再变一个大小:

<button type="button" class="btn btn-info btn-lg"> 按钮</button>

有时候我想让一个 a 标签伪装成一个按钮:

<a class="btn btn-info btn-lg"> 按钮</a>

JS 组件我用着一直悲剧,就不说了。

5. 关于其他一些东西

编译 css 的语言我真的不会。所以看到这些东西就跳,跳,跳,然后文档就看完了??!!

6. 写在最后

用 Bootstrap 能很快地写出一个十分简洁的网页。但是呢,如果纯用它,网页也就剩下简洁了。还有,设计、构图,这些东西必须在纸上完成,再放到电脑上。否则只用代码写,然后再看效果,速度十分慢。

Bootstrap 简单着用的话十分简单,搞定布局就好了。如果真真正正使用,那种高端的,还得去学 Css 编程语言。

当觉得 Bootstrap 自带的组件满足不了你的时候,自己去找其他 JS 吧。

参考资料


评论

发表回复

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