yingsong

说起响应式前端框架,比较而言,bootstrap还是不错的,虽然可能很多文档都是英文的。今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例

参考资料:

runoob的bootstrap中文教程:http://www.runoob.com/bootstrap/bootstrap-forms.html

bootstrap中文网:http://www.bootcss.com/

bootstrap 各种实用案例(脚本之家): http://www.jb51.net/Special/769.htm

jquery api : http://www.jquery123.com/

1. 简介

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT。主要是为了支持移动端,所以pc端就很难做得跟以前pc那样复杂漂亮。

  在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备。

  现在不一样了,Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。

2. 开发环境及插件支持

  由于bootstrap是基于jquery的,所以引入jquery插件是必须的。

  这里都是使用cdn资源,以便减少网站服务器压力 

<!--head中引入-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!--body结尾-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

   为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

  对浏览器/设备的支持

 

  Chrome Firefox IE Opera Safari
Android YES YES 不适用 NO 不适用
iOS YES 不适用 不适用 NO YES
Mac OS X YES YES 不适用 YES YES
Windows YES YES YES* YES NO

  

3. 编码规范

  建议在编码之前先看看 bootstrap的html和css编码规范,对于编写整齐高质量的前端代码很有用!

4. CSS

4.1 网格布局

  Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

  

 

分类:

技术点:

相关文章: