引入Bootstrap方法
来源:互联网 发布:itools mac 编辑:程序博客网 时间:2024/05/17 03:43
如果你是一名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文件中,减小文件数量与其大小,这正是网站优化非常重要的一点。
这篇引入Bootstrap方法入门教程先写到这,之后我们会陆续推出一系列Bootstrap教程文章,有兴趣的朋友可以持续关注我们。
- 引入Bootstrap方法
- Django 中引入bootstrap的方法
- webpack引入jquery以及bootstrap方法
- vue引入jquery和bootstrap的方法
- 利用vue-cli创建新项目和引入Bootstrap的方法
- BootStrap CDN引入
- Bootstrap(引入)环境安装
- Bootstrap使用记录--引入
- bootstrap-datetimepicker的引入
- bootStrap 文件引入
- angular4 引入bootstrap
- vue中引入bootstrap
- vue中引入bootstrap
- ssm jsp引入Bootstrap
- jsp中引入bootstrap
- bootstrap引入插件无效
- 引入bootstrap,设置静态资源
- 引入bootstrap导致布局混乱
- 2017IT互联网大会跑会指南【持续更新中~】
- xcode上编译c语言程序报错:ld: x duplicate symbol for architecture x86_64 clang: error: linker command failed
- 一个简单的fastJson实例
- 基于scrapy的天气数据采集
- Java内存系列二之对象创建
- 引入Bootstrap方法
- @echo 与 echo的区别
- 微服务
- C,C++用过的调试方式/函数/小程序
- pdf文档怎样编辑文字与图片
- 增量式pid分析 及 参数整定
- Spring延迟加载的问题
- php判断请求来源
- centos7 forward dns server构筑