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标签里面的这段代码 ,其它的需要自己导入。做出同样的效果。