淘先锋技术网

首页 1 2 3 4 5 6 7

零. 写在前面

Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手。

一. 什么是Bootstrap?

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。同时,Bootstrap 还是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。作为一个框架,它和jQuery EasyUI、WeUI一样,助力于前端开发。简而言之,使用Bootstrap让前端开发变得简洁高效。


注释:
1. jQuery EasyUI:jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。
2. WeUI:WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

二. Bootstrap入门

使用Bootstrap框架,必须具备 HTML 、 CSS 和 JavaScript 的基础知识。如果没有掌握,可以前往【菜鸟教程】学习。
2.1 环境配置
你有两种方式可以使用Bootstrap,本地调用和网络调用。
本地调用需要从网络上下载[用于生产环境的Bootstrap],下载地址:http://v3.bootcss.com/getting-started
这里写图片描述
下载完成后,解压文件,得到如下图所示的三个文件夹,这三个文件夹分别用于存放样式文件、字体文件、js脚本文件。
解压文件夹
网络调用只需使用 BootCDN 提供的免费 CDN 加速服务。在你的网页文件中写入以下link即可。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2.2 了解Bootstrap

2.2.1 Bootstrap是html5的文档

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

2.2.2 移动设备优先

Bootstrap 3是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。也就是说,Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定。

2.2.3 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100%
    宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值
    margin 从而抵消掉为 .container 元素设置的
    padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
    .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
    .col-lg-*不存在, 也影响大屏幕设备。

通过研究后面的实例,可以将这些原理应用到你的代码中。
下面这幅图有助于理解Bootstrap的栅格系统。
这里写图片描述

三. 在线学习的网站推荐

Bootstrap V3版本官网:http://v3.bootcss.com
菜鸟教程Bootstrap专栏:http://www.runoob.com/bootstrap/bootstrap-tutorial.html
腾讯课堂:http://ke.qq.com
慕课网:http://www.imooc.com