BootstrapBootstrap 前端UI框架

Bootstrap 有什么优越性?

1.简便利落的用来搭建WEB页面的HTML,CSS, JavaScript的工具集

2.根据html5, css3,
具有出色特性,友好的攻曲线,卓越的兼容性,12列的响应式栅格结构、丰富的机件、JavaScript插件、排版、表单控件,还有
基于WEB的定制工具。

3.有完的类库,基于Less的css管理。

我们于描绘css时方可参见bootstrap的css源码,非常规范,优秀。

哪开始Bootstrap?

 在官网 get bootstrap.com 获取bootstrap包

一个基底比如完整的Bootstrap 框架index页面,包含如下一些:

1.jQuery 假如以bootstrap之前引入

2.<!DOCTYPE html>  html5 文档头

3.<meta charset=“utf-8”> 指定文档编码

4.<meta name=“view port” content=“width=device-width,
initial-scale=1”> 设定初始大小以及屏幕是1:1比例

5.引入bootstrap.min.css在head标签中

6.引入html5shiv.min.js && respond.min.js 能让IE9以下浏览器兼容html5

7.引入jQuery.man.js && bootstrap.min.js 在body底部

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html> 

举手投足优先的方针:

Bootstrap 3 抛弃了IE7,Bootstrap 3最老之风味就是动设备优先。

情节:决定什么是无比重大的

布局:有限设计更小的升幅,基础之CSS是挪装备优先,媒体询问是针对性被平板计算机,台式电脑。

日益进增强:随着屏幕大小的增而上加元素。
(渐进增强,优雅降级两种植处理兼容的主意)

 

Bootstrap 网格系统的干活原理:

1.数据行(.row)必须含有在容器(.container)中,以便为夫与合适的针对那个方法及内距(padding)

eg.

<div class=“container”>

<div class=“row”></div>

</div>

2.当行(.row)中好填补加列(.column),
但列数之同无可知过平分的总列数,默认12,这个是足以变更的,但是12凡顶尖的。

eg.

<div class=“container”>

    <div class=“row”>

<div
class=“col-mod-4”></div>

<div
class=“col-mod-8”></div>

    </div>

</div>

3.实际的容器应放置于列容器(.column)之内,而且只有发生列(column)才方可当行容器(.row)的直子元素

4.透过设置内距(padding)从而开创列与列次的区间,使用(margin)设置实行及履行内的距离。

 

排的前缀表示了针对性一个底屏幕宽度:列好嵌套,偏移,改变列方向与浮动像素

.col-xs-   <768px

.col-sm-  >=768px

.col-md-  >=992px

.col-lg-    >=1200px

 

相关文章