bootstrap 实战入门教程(一)
2017-09-29 10:36
417 查看
bootstrap 实战入门教程(一)
说起响应式前端框架,比较而言,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/bootstra f990 p-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列。相关文章推荐
- bootstrap 实战入门教程(一)
- 云星数据---Scala实战系列(精品版)】:Scala入门教程042-Scala实战源码-Scala 集合List
- vue2 入门 教程 单页应用最佳实战[*****]
- BootStrap入门教程 (一)
- yii2实战教程之新手入门指南-简单博客管理系统
- 云星数据---Scala实战系列(精品版)】:Scala入门教程058-Scala实战源码-Scala 正则 Regex
- IT营最新Node.js入门到实战项目视频教程免费下载
- Android基础入门教程——8.3.2 绘图类实战示例
- mybatis实战教程(mybatis in action),mybatis入门到精通
- mybatis实战教程(mybatis in action),mybatis入门到精通
- (转帖)BootStrap入门教程 (二)
- mybatis实战教程(mybatis in action),mybatis入门到精通
- PHP开发从入门到实战教程分享
- 【备忘】微信公众平台开发入门到实战开发视频教程(Java+PHP)
- mybatis实战教程(mybatis in action),mybatis入门到精通
- 凡哥OpenCV基础入门教程(跳一跳专题)-CH3.4-实战篇 手动模式玩跳一跳
- 云星数据---Scala实战系列(精品版)】:Scala入门教程006-Scala数组详解005
- mybatis实战教程(mybatis in action),mybatis入门到精通
- oracle全集实战视频教程,oracle入门到精通教程下载
- CMake快速入门教程:实战,本文参考《CMake Practice》这篇文章