详解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 相关文章推荐
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
js密码强度实时检测代码
Mar 02 Javascript
轮播图组件js代码
Aug 08 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JavaScript生成图形验证码
Aug 24 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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的安全
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python如何实现的二分查找算法
2020/05/27 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
linux下进程间通信的方式
2013/01/23 面试题
外语专业毕业生自荐信
2014/04/14 职场文书
廉政承诺书
2015/01/19 职场文书
早恋主题班会
2015/08/14 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL