详解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数字时钟示例分享
Apr 23 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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
ajax 的post方法实例(带循环)
2011/07/04 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python复制文件代码实现
2013/12/23 Python
python实现simhash算法实例
2014/04/25 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python实现学生管理系统
2018/01/11 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
逻辑链路控制协议
2016/10/01 面试题
教师自荐书
2013/10/08 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
应用心理学个人的求职信
2013/12/08 职场文书
前台接待员岗位职责
2014/01/02 职场文书
称象教学反思
2014/02/03 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
产品售后服务承诺书
2014/05/21 职场文书
活动总结格式
2014/08/30 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书