Bootstrap 前端UI框架

时间：2024-07-31 20:35:20

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

相关文章