详解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判断用户浏览器插件安装情况的代码
Jan 01 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python如何删除文件中重复的字段
2019/07/16 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
"引用"与多态的关系
2013/02/01 面试题
网络教育自我鉴定
2013/11/01 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
副总经理任命书
2014/06/05 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
写给老师的感谢信
2015/01/20 职场文书
机动车交通事故协议书
2015/01/29 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
开票证明
2015/06/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
田径运动会广播稿
2015/08/19 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python