读书频道 > 网站 > 网页设计 > Bootstrap实战
2.3.1 安装Bootstrap
2013-11-02 14:26:42     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

Bootstrap安装大致需要以下两步。

第1步:安装Bootstrap的基本样式。样式的安装有多种方法,下面代码使用<link>标签调用CSS样式,这是一种常用的调用样式方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="bootstrap/css/bootstrap.css" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" type="text/css">
<link href="bootstrap/css/self.css" type="text/css">
</head>
<body>
</body>
</html>

其中bootstrap.css是Bootstrap的基本样式,bootstrap-responsive.css是响应式布局样式,self.css是本文档自定义样式。

注意 这里有两个关键点,其中bootstrap.css是 Bootstrap框架集中的基本样式文件,只要应用 Bootstrap,就必须调用这个文件。而 bootstrap-responsive.css则可以根据需要选择性安置,如果想让项目具有响应式布局的效果,就必须调用这个样式文件。调用必须遵循先后顺序,bootstrap-responsive.css必须置于bootstrap.css之后,否则就不具有响应式布局功能。最后,self.css是项目中的自定义样式,用来覆盖 Bootstrap 中的一些默认设置,便于开发者定制本地样式。

第2步:CSS样式安装完后,就可以进入JavaScript调用操作。方法很简单,仅需把需要的jQuery插件源文件按照与上一步相似的方式加入到页面代码中。

调用Bootstrap的jQuery插件,代码如下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="bootstrap/css/bootstrap.css" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.css" type="text/css">
<link href="bootstrap/css/self.css" type="text/css">
</head>
<body>
<!--文档内容-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

其中jquery.js是jQuery库基础文件,bootstrap.js是Bootstrap的jQuery插件源文件。建议将JavaScript脚本文件置于文档尾部,即相邻</body>标签的前面,不要置于<head>标签内。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.3 Bootstrap应用解析
下一篇:2.3.2 Bootstrap架构解析
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站