详解Bootstrap 学习(一)入门


Posted in Javascript onApril 12, 2019

一:什么是Bootstrap?

Bootstrap是目前留下的前端框架之一,具备已下特点:

  1. 基于HTML、CSS、JavaScript开发的;
  2. 样式展现方面定义了大量全局样式、列表、按钮等样式组件;
  3. 特效方面实现了轮播、菜单等常用的js控件;
  4. 样式采用less编写,js调用了jquery库;
  5. 来自Twitter,现在委托保管再github上。

Bootstrap适用于网站的开发,不适用于管理系统(例如ERP)开发,它提供的css组件比较多,js控件比较少,因此可以称bootstrap是一套css框架。

二:下载:

官网地址:

http://www.bootcss.com/

Bootstrap3下载连接:

https://v3.bootcss.com/getting-started/

详解Bootstrap 学习(一)入门

三:基本模板,入门:

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
  <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
   <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <h1>你好,世界!</h1>

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
 </body>
</html>

文件版本:

!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link href="./bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="external nofollow" 
	rel="stylesheet">
<title>Insert title here</title>
</head>
<body>

</body>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

注:之上所有引用的js都是由官方提供,我们自己可以用自己下载好的本地文件添加进去即可使用!

以上所述是小编给大家介绍的Bootstrap入门学习详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
初步了解javascript面向对象
Nov 09 Javascript
js实现简单计算器
Nov 22 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
vue下载二进制流图片操作
Oct 26 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 #Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 #Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 #Javascript
JS实现li标签的删除
Apr 12 #Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 #Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 #Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
You might like
php显示页码分页类的封装
2017/06/08 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python实现LRU热点缓存及原理
2019/10/29 Python
序列化Python对象的方法
2020/08/01 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
C有"按引用传递"吗
2016/09/06 面试题
三方股东合作协议书范本
2014/09/28 职场文书
个人整改方案范文
2014/10/25 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
php png失真的原因及解决办法
2021/11/17 PHP
MySQL去除密码登录告警的方法
2022/04/20 MySQL