引入bootstrap的方法

如果你是一名web前端开发工程师或者网页设计师,那么肯定对Bootstrap这个框架早有耳闻,甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。
而在去年年底推出的Bootstrap3更是追随了响应式布局扁平化设计的web开发与设计潮流,让我们感受到了它所带来的无穷魅力。
我们会通过接下来一系列的Bootstrap教程,让Bootstrap初学者们一步步掌握Bootstrap的使用方式,在本次教程中,我们将会讲解,如何在你的项目中引入Bootstrap方法,当然,为了与国际接轨,我们还是以Bootstrap3为例,一步步展开。
 

官网下载压缩包

完整压缩包可以到Bootstrap官网下载,或者直接到我们的文章结尾处下载,下载解压缩以后我们会获得如下的文件目录:
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
从这个目录结构我们可以看到css、js文件以及fonts文件都已经包含进来了,将这个文件目录放入你的项目ui文件夹下。
 

在HTML文件中引入

为了符合搜索引擎优化规则,我们引入最核心的压缩文件即可,其中包括bootstrap.min.css、bootstrap-theme.min.css以及bootstrap.min.js。

bootstrap.min.css文件中涵盖了所有Bootstrap的核心样式,包括按钮、导航栏、布局等等元素。

bootstrap-theme.min.css文件包含所有Bootstrap2的样式,如果你想在Bootstrap3的框架中使用Bootstra2的样式,那么就可以将该文件在bootstrap.min.css之后引入,从而覆盖前者的扁平化样式。

bootstrap.min.js文件中包含了所有Bootstrap3中的js交互以及逻辑代码,必须引入。

所以我们可以在项目的公用头文件模块调用如下代码:<!-- 引入已经压缩的css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap.min.css"><!-- 如果你想采用Bootstrap2的样式,那么引入该压缩css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap-theme.min.css"><!-- 引入已经压缩的js文件 --><script src=“/ui/js/bootstrap.min.js"></script>在这之后就可以在你的项目中调用对应的Bootstrap样式以及JS模块了。
 

注意点补充

值得注意的是,如果你先前使用过Bootstrap2,就会发现Bootstrap3的压缩包里缺少了bootstrap-responsive.css文件以及增加了bootstrap-theme.min.cs文件。
后者的作用我们在之前已经解释了,前者是在Bootstrap2中起到一个实现响应式技术的作用,而在Bootstrap3中,将其整合到了Bootstrap.min.css文件中,减小文件数量与其大小,这正是网站优化非常重要的一点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值