Home > Article > Web Front-end > BootStrap学习(1)_html/css_WEB-ITnose

BootStrap学习(1)_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:34:181096browse

一、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>

在这里，可以看到

..包含了 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><br />在一个<span></span>标签中加入.class样式即可。<br />

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：[译]深入了解CSS Box Shadow_html/css_WEB-ITnoseNext article：盒模型CSS_html/css_WEB-ITnose

See more