说到boostrap, 我可以这样说,大概在半年前,我写页面的时候使用过它来布局及写样式, 但是根本没有好好学习过它,尤其它的珊格系统, 在布局的时候,它真的很好使,少写很多的css,而且响应式很好, 然而虽然我用过,但是还理解的很不全面. 现在我找到工作了,在实习做项目中又要使用它了, 对它很不熟悉,导致使用起来概念模糊,所以这就来好好学习它,整理一下, 使用起来更得心应手.
什么是 Bootstrap？
Bootstrap是由Twitter推出的开源CSS框架
历史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么学习和使用boostrap ?
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计
Bootstrap 包的内容
-
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
-
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
-
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
-
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。
-
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
如何使用Boostrap ?
两种方法在我们的html文件里面引入它
方法一: 最简单,但是在网络通畅的情况下才有效
引入Boostrap的在线链接
- 利用免费的CDN，你可以用BootStrap官网的免费CDN，或者其他的例如百度的静态资源库的 CDN 服务（简单的来说就是网址）
啥? 你不知道CDN是什么?
好,我来告诉你,CDN的全称是Content Delivery Network，即内容分发网络.
你就理解它是一个免费的服务器，而你要引入的文件放在这个服务器上，你直接用网址引用就行.
引入CDN也有两种选择:
- BootStap官网提供的CDN:
Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。
<!-- 新 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">
<!-- 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>
- 采用百度的静态资源库 (http://cnd.code.baidu.com/):
百度的静态资源库的CDN服务,访问速度快,加速效果更明显,没有速度和带宽的限制,永久免费,引入代码如下:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
这样你的环境就好了,你就可以直接使用Boostrap了.
方法二:
下载bootStrap到本地，从本地引入
谷歌/百度搜索 BootStrap, 然后去官网下载
一般都提供了3种下载, 包但是Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了 压缩 与 未压缩 两种版本。
如下图:
一般推荐下载第一种，用于生产环境的BootStrap包 （预编译(已经编译好的)的 Bootstrap）
-
当您下载了 Bootstrap 的已编译的版本(第一种)，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
-
Bootstrap 源代码（如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：）
然后就是把下载的包复制到你的项目里，然后根据你的的路径引入就行，引入的文件和从cdn引入的文件一样
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="本地路径/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="本地路径/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="本地路径/bootstrap/3.3.5/js/bootstrap.min.js"></script>
由于Boostrap所有的实现都是封装在类class属性中,所以下面的例子你可以看到Boostrap的实现是写在class中的.
simple example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
#这里是为了能够适应更多设备的响应式设计
<meta name="viewport" content="width=device-width, initial-scale=1">
#引入Boostrap
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Button</h2>
<span> .btn 类是按钮的基本样式:</span>
<button type="button" class="btn">基本按钮</button>
<br/>
<sapn>.btn-warning 该样式表示需要谨慎操作的按钮:</sapn>
<button type="button" class="btn btn-warning">Warning</button>
</div>
</body>
</html>
测试结果
响应式设计
<meta name="viewport" content="width=device-width, initial-scale=1">
这是为了让你的BOOTstrap在小屏幕上，也正常显示大小，响应式页面设置，
网友评论