如何使用bootstrap框架
使用bootstrap框架
第一步就是引入bootstarp的两个必要的文件,一个是CSS文件,而另一个就是JS文件,bootstrap里面的组件和样式都是基于这两个文件才生效的。常用的安装bootstrap有两种,第一种方式就是使用线上的CDN方式,直接在head里面引入即可。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
第二种方式就是通过npm方式安装,需要事先安装node。直接打开nodejs官网直接下载安装,直接下一步即可。下载安装完成之后打开终端,windows系统用cmd(win+R)打开。
如果显示这样说明你的node安装成功,npm是它默认帮你安装的,所以你无须手动安装。bootstrap的安装如下:
npm install bootstrap@3
你可以去看一下bootstrap的文件结构,大致长这样:
其实最主要的还是两个文件,css和js,如果你想要更多的模板和主题,你可以直接去找bootwatch,里面有很多主题供你使用。今天的分享就到这里啦,欢迎大家留言。
ps:笔者最近开通了微信公众号,大家可以关注一下哦,谢谢大家的支持!
如何使用bootstrap框架相关推荐
- Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
- Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
- Python之flask结合Bootstrap框架快速搭建Web应用
目录 前言 安装bootstrap扩展 模板的继承 总结 前言 Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Soc ...
- 将用bootstrap框架的html文件转为eclipse中jsp文件
eclipse中引入bootstrap框架 最近跟着我们专业一个很厉害很崇拜的老师捯饬毕设,他让我学自适应框架bootstrap,花了一周时间了解了该框架的 基本架构和用法,上去就写html文件,本来 ...
- 在Bootstrap框架中,form-control的效果
在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度 ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- 基于bootstrap框架在ie8以下,兼容媒体查询[css样式]
1 <style type="text/css"> 2 /*基于bootstrap框架在ie8以下,兼容媒体查询*/ 3 .row [class^="col- ...
- python web开发 Bootstrap框架基础
文章目录 1. 安装 2. Bootstrap 5 基本应用 learning from <python web开发从入门到精通> Bootstrap 是最受欢迎的 前端组件库,用于 HT ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
最新文章
- [转帖]什么是光纤的波长?看看有哪些是你不知道的!
- ​常用的连续概率分布汇总
- 美特斯邦威java面试_在美特斯邦威工作一个月,我学到了什么
- Hyper-V 的导入和导出
- jedis使用 api_通过Jedis API使用排序集
- stn算子_深度学习常用算子(二)
- Unity协程实现分析以及Lua协程与Unity协程的混合使用
- 解决yum [Errno 256] No more mirrors to try
- 数字图像处理(作业三)——孔洞填充+全局阈值+自适应阈值
- HMAC加密的消息摘要码
- 20个PCB快捷键操作,提升绘图效率
- 安装activesync同步时遇到的问题
- Lab: Username enumeration via different responses:通过不同的响应来验证用户名是否正确复盘
- Python基础(二)
- 深度学习:使用pytorch训练cifar10数据集(基于Lenet网络)
- 淘宝母婴用品数据分析
- 【成电860考研】经验贴汇总(专业课部分)-扒遍所有网站:信软群、王道、知乎、csdn等,截止21年7月整理出的所有帖子-共15篇
- OR青年 | 分布鲁棒优化研究报告
- 数据结构之排序【归并排序和快排的顶级优化和快排的三种原理的实现及分析】 内含动态演示图
- CTF--[网鼎杯 2020 青龙组]AreUSerialz