Boostrap使用方法(已经会用请走开)

2016-11-22 本文已影响388人吧啦啦小汤圆

说到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在小屏幕上，也正常显示大小，响应式页面设置，