引入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文件中,减小文件数量与其大小,这正是网站优化非常重要的一点。
这篇引入Bootstrap方法入门教程先写到这,之后我们会陆续推出一系列Bootstrap教程文章,有兴趣的朋友可以持续关注我们。
引入Bootstrap方法相关推荐
- 【Vue】Vue引入bootstrap的方法
方法一:在main.js中引入(1) npm i jquerynpm i bootstrap 在main.js中 import 'jquery/dist/jquery.min'import 'boot ...
- vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
- angular引用bootstrap_angular怎么引入bootstrap?
angular中引入bootstrap的方法:方法一.找到index.html直接添加样式引用链接.方法二.打开Angular.json文件找到style和scripts两个配置节.并将bootstr ...
- django从零开始引入bootstrap模板
可能很多人是看完狗书才开始学习django的,但一开始对于自己写django项目引入bootstrap模板很能是件有困难的事 本次博客教程的python版本为3.5,bootstrap版本为3.3.3 ...
- 3不生效 bootstrap_Minitab学习 | 统计学中的Bootstrap方法
什么是Bootstrap 抽样分布描述从总体的随机样本中获取统计量的每个可能值的可能性:换句话说,该大小的所有随机样本中有多大比率将得到该值.Bootstrap是一种通过抽取多个样本来估计抽样分布的方 ...
- 在线引入bootstrap包
在eclipse中,本地引入一直引入不起,绝对路径和相对路径都不行~所以,现在就先用在线包引入bootstrap.同时bootstrap需要jquery来支持 <link rel="s ...
- SSM整合的Maven项目中引入Bootstrap,三步实现高大上插拔UI,后端也有美感
对比效果 引入bootstrap前 引入bootstrap后 实现 第一步下载并引入bootstrap bootstrap3下载 https://v3.bootcss.com/getting-star ...
- laravel mysql视图,在 Laravel 视图文件中引入 bootstrap
如何在 Laravel 视图文件中引入 bootstrap?对于从来没有接触过 PHP 开发框架的菜鸟来说,这确实是个问题. 在我们这些菜鸟传统的认知里,要在一个 html/php 文件里引入一个外部 ...
- php files得不到导入的文件,PHP判断文件是否被引入的方法get_included_files用法示例...
本文实例讲述了PHP判断文件是否被引入的方法get_included_files用法.分享给大家供大家参考,具体如下: // 本文件是 abc.php include 'test1.php'; inc ...
最新文章
- 合成生物学公司如何操纵微生物组
- 《强化学习周刊》第16期:多智能体强化学习的最新研究与应用
- 【 C 】作用域、链接属性、存储类型、static 关键字简介及总结
- 发布一个自己写的.Net代码生成器
- Linux下安装MongoDB单节点
- 在iis中让asp.net的错误显示在远程访问电脑中
- 区块链 facebook_最新数据上区块链资讯,以及研究报告
- 汇编语言之标志寄存器
- centos6.0安装中文输入法
- 【 如何将.vue文件中的所有css代码放入一个.css文件中】
- 线程安全的三大不安全案例以及解决方法
- MapReduce - Map输入的分片
- 计算机专业导论论文范文,计算机新导论论文范文
- 安卓逆向助手反编译apk后文件夹为空
- 3.图灵学院-----阿里/京东/滴滴/美团整理----高频JVM调优篇
- 建立syslink双核工程和make运行
- Java虚拟机 - JVM是什么?
- CENTOS上的网络安全工具(二)ARKIME部署安装
- 微信公众号:设置分享
- 一张小学二年级的请假条