bootstrap安装配置
来源：互联网 发布：windows软件 编辑：程序博客网 时间：2024/06/06 13:12
bootstrap安装配置
下载Bootstrap
打开官方网站http://getbootstrap.com/，点击Download Bootstrap。
1) 下载用于生产环境的文件
2) 下载用于编译css的Less源码及插件的js源文件
3) 下载用于编译css的Lass源码及插件的js源文件
4) Bootstrap文件结构
其中，css就是它帮我们定义好的css文件，凡是带min的就是压缩过的，js里面是定义好的js文件，同样min表示压缩过的文件。fonts里面包含多种字体格式eot、svg、ttf、woff、woff2，很多小图标它是用字体的方法来给你显示出来的，这样的话放大也不会失真，我们也可以改小图标的一些颜色。简而言之就是，不同的文字在不同的字体下显示不同的符号。比如说，你给汉字设置一个特别的英文字体，它就会显示特别的符号，比如说三角。
5) 用CDN直接引入
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
直接引入上面CDN的文件就不用再下载bootstrap了，前提是你的电脑一定能上网，才可以引入这个CDN的文件。
html标准模版
（也就是说，我们写一个Bootstrap的html的文件的时候，需要符合什么样的标准。）
1) HTML5文档结构
2) 移动设备优先
3) Bootstrap css引入
4) Jquery引入
5) Bootstrap js引入
在官方网站也给出了html标准模版如下：
首先，它是引用HTML 5的DOCTYPE以及编码格式。
然后引入 <meta name=“viewport”content=“width=device-width，initial-scale=1”>这句话，这句话是bootstrap3.3.4版本中新增加的，它的意思是移动设备优先。宽度就是这个设备device的宽度，initial-scale=1表示在移动设备上不进行缩放。不缩放时，移动设备上就出现了滚动条。
然后通过<link href=“css/bootstrap.min.css” rel=stylesheet”>引入Bootstrap的css文件。
然后通过
<script src=http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”></script> 引入Jquery文件 。
最后通过<script src=“js.bootstrap.min.js></script> 引入Bootstrap js文件。
开发工具
bootstrap说到底是html、css、javascript的前端框架，所以说凡是开发html、css、javascript的工具，它都可以开发。
1) nodepad++
2) dreamweaver cs6
3) HBuilder（我们以后的课程会选取HBuilder作为我们的开发工具）
4) webstorm
第一个网页
1) 引用Bootstrap
2) 编写html代码结构
3) 使用Bootstrap样式
具体操作
1）在Bootstrap下新建一文件coder
2）打开HBuilder
3）点击鼠标右键新建一个Web项目
4）填写项目名称ch01，并把它保存在刚才新建的文件夹coder下。
5）打开index.html首先引入移动设备优先<meta name=“viewport”content=“width=device-width，initial-scale=1”>，再引入Bootstrap的css文件。
然后通过
<script src=http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js”></script> 引入Jquery文件 。
最后通过<script src=“cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js></script> 引入Bootstrap js文件。
这样，我们就可以在body里面写自己的结构。
index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
6）再在ch01下新建一个index2.html
7）打开index2.html，第一步同样导入移动设备优先
8）标题名字为demo2
9）切换到我们的物理硬盘，找到我们的bootstrap文件并打开。
10）将bootstrap-3.3.4-dist目录下的css文件、img文件以及js文件复制粘贴到我们新建的Web项目coder下的ch01中，来代替已经自动生成的空的css文件、img文件以及js文件。
11）然后，回到我们的HBuilder，这样的话就有了js和css
12）引入电脑上的css,
<link rel=“stylesheet” href=”css/bootstrap.min.css”/>
这样的话将来这个文件就在你的服务器上，你的页面访问你的服务器这个时候是最快的如果你不想用CDN的话。
13）回到物理硬盘找到jquery文件并打开，将下面的文件复制
14）将复制的文件放在ch01的js文件中
15）再引入jquery
16）再引入bootstrap js
17）当完成这些操作，我们的页面就可以使用bootstrap定义的所有内容了。
18）使用bootstrap定义一个容器
19）进入这个网站
20）将nav标签里面的内容复制
21）将复制内容粘贴到index2.html里面的body标签中，粘贴完之后保存。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo02</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</body>
</html>
22）点击Chrome运行一下
23）显示运行结果
我们可以看到上面的菜单就有了
屏幕最小化的时候，点击右上角也会显示菜单。
这就和我们之前复制的代码有关，所用的样式就是bootstrap给我们定义好的样式。
练习
1）查看官方网站，起步里面，打开第一个导航条实例。
2）然后点击鼠标右键查看源码
3）复制nav标签里面的这段代码 ，其它的需要自己导入。做出同样的效果。
- bootstrap安装配置
- Bootstrap的安装与配置
- node.js、git、bootstrap等安装配置
- bootstrap配置
- 【bootstrap】使用bower安装bootstrap
- Yii-bootstrap配置
- bootstrap --环境配置
- bootstrap-table自己配置
- bootstrap模态框配置
- Bootstrap框架的配置
- django+AngularJS+Bootstrap配置
- bootstrap-table初始化配置
- bootStrap网格配置
- bootstrap学习心得笔记--第一节【bootstrap配置】
- Bootstrap 环境安装
- bootstrap-sass安装使用
- Bootstrap(引入)环境安装
- Bootstrap把玩0：安装
- 带着女友去看海——青岛
- 1315 合法整数集
- Bootstrap简介
- 4、Linux时间编程
- Java反射初识
- bootstrap安装配置
- Spring使用实例工厂方法创建Bean(一)
- Bootstrap栅格系统原理
- NOIP2016 day2 t2蚯蚓
- 278. First Bad Version (二分，java)
- android权限大全
- Oracle 约束规则（三）
- 数据库第1天
- First Bad Version问题及解法
