BootStrap学习(1)

一、Bootstrap简介

BootStrap是由Twitter推出的前端框架，2011 年八月在 GitHub 上发布，BootStrap是基于Html,Css,Javascript的，可用于快速开发web，是现在主流的前端框架。

Bootstrap的优点有:

1. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持：所有的主流浏览器都支持 Bootstrap。

3.容易上手：因为Bootstrap是基于 HTML 和 CSS 的基础知识，所以学习使用轻松。

4.响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

二、下载BootStrap

可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，将看到如下所示的网页：

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。这个是包含上面的压缩内容再加上源代码

我们下载Download Bootstrap 这个就可以了。

然后这个的文件结构是

已经看到里面是一些CSS 和 JS 还有Glyphicons 的字体。

三、引入到HTML

1.把下载好的BootStrap文件放到项目中。

2.一个引用BootStrap的html模板:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="../js/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" />

    <script src="../js/jquery-1.9.1.min.js"></script>

    <script src="../js/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>

</head>

<body>

</body>

</html>

在这里，可以看到<Head>..</Head>包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

注意: 因为BootStrap 的javascript插件需要引入 jQuery ，所以要另外下载一个Jquery.js，并且要放到bootstrap.min.js的前面。

四、用BootStrap CDN加速点

可以不用下载BootStrap，直接使用一些BootStrap加速点，使用CND加速点的好处：是访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

可根据个人喜欢的CDN加速点选用, 这里使用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源

HTML模板就可以变成了:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->

  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>

   <!-- 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>

</head>

<body>

</body>

</html>

注意: 使用CDN必须有外网才可以。

五、第一个例子_字体图标

上面下载安装BootStrap的时候以经了解过它的目录结构，

在 dist文件夹内的fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

Bootstrap 捆绑了 200 多种字体格式的字形这里有BootStrap的字体图标列表http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

CSS 规则解释

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');

  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

.glyphicon {

  position: relative;

  top: 1px;

  display: inline-block;

  font-family: 'Glyphicons Halflings';

  -webkit-font-smoothing: antialiased;

  font-style: normal;

  font-weight: normal;

  line-height: 1;

  -moz-osx-font-smoothing: grayscale;

}

所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

用法

如需使用图标，只需要简单地使用下面的代码即可。

<span class="glyphicon glyphicon-search"></span>
在一个<span></span>标签中加入.class样式即可。

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 如何使用字形图标（Glyphicons）</title>

   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

</head>

<body>

<p>

    <a href="#"><span class="glyphicon glyphicon-search">搜索</span></a>

   <a href="#" >

      <span class="glyphicon glyphicon-fast-backward">首页</span>

   </a>

   <a href="#">

      <span class="glyphicon glyphicon-fast-forward">末页</span>

   </a>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-zoom-in">放大</span>

   </button>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-trash">删除</span>

   </button>

</p>

<button type="button" class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-user"></span>用户

</button>

<button type="button" class="btn btn-default btn-sm">

  <span class="glyphicon glyphicon-user"></span>用户

</button>

<button type="button" class="btn btn-default btn-xs">

  <span class="glyphicon glyphicon-user"></span> 用户

</button>

</body>

</html>

效果:

其中用户中的 btn-lg btn-sm btn-xs 是三个控制大小的样式。

自定义大小和颜色

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">

  <span class="glyphicon glyphicon-user"></span> 用户

</button>

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: color:#f00;">

  <span class="glyphicon glyphicon-user"></span> 用户

</button>