攻城狮-web

Bootstrap下载与安装

发表于 |

bootstrap发展历程

1、是基于HTML,CSS,JAVASCRIPT.简洁灵活，使web开发更加快捷
2、Twitter公司主导研发的开源框架，主要包括栅格系统，CSS模块以及JS插件等。
3、V2(兼容IE-8),V3(不兼容IE6-8,用less编译),V4(预览版,加入了flex布局,sass编译)
4、依赖jquery
5、jquery3兼容性较差
6、中文官网 [http://www.bootcss.com/]

bootstrap 下载

bower安装

1
$ bower install bootstrap
1
2
选择版本号
$ bower bootstrap@3.3.7

Npm 安装

1
$ npm install bootstrap

Github安装

1
git clone
1
2
3
4
5
##基本模板
<meta content="IE=edge"> 强制用IE最新模式渲染
<meta name="description" content="描述"> 强制用IE最新模式渲染
<meta name="keywords" content="IE=edge"> 强制用IE最新模式渲染
可以使用HBuilder的自定义模板引入文件

容器

.container 响应式宽度
.container-fluid 100%宽度

示例代码：

1
2
3
4
5
6
<div class="container">
  ...
</div>
<div class="container-fluid">
  ...
</div>

栅格系统

说明:

栅格系统用于一系列的行(row)与列(column)的组合来创建整个页面的布局，注意row与column都是在container中使用的，然后将自己需要添加的内容放到行列中就行。示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row"> //行设置
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> //超小屏幕(<768px)占用6格，中等屏幕(>=992px)占用4格
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>
</div>

栅格参数

image
每个col-…都必须放在row(行-12)里面,每一个col-屏幕类型-份数都会将row分成这样的份数，依次来响应不同浏览器屏幕的宽度
如何多分配的份数超出12，则会显示到下一行。

媒体查询

1
2
3
4
5
6
7
8
9
10
11
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

对齐方式

1
2
3
4
5
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>


以上的介绍都是BT的css布局，当然还有组件，js插件，网站案列都没有介绍，对于常规网站来说，其前台的页面开发与动效应用，交互体验我们都可以通过官方文档查阅基本可以实现，再加上我们自己的的一些效果我相信写一个可以发布的网页demo是木有问题的，BT上面也有自己的字体图标，我本人觉得这些图标不是太生动，富有创造力，因此我建议使用iconfont的图标http://www.iconfont.cn/,使用方法看文档就行。
bootstrap官方网站:http://v3.bootcss.com/