详解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淡入淡出元素让其效果更为生动
Sep 01 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
JS回调函数深入理解
Oct 16 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python字典简介以及用法详解
2016/11/15 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
python Pexpect模块的使用
2020/12/25 Python
Python绘制数码晶体管日期
2021/02/19 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
医学生求职自荐信
2013/10/25 职场文书
幼儿教师研修感言
2014/02/12 职场文书
车间核算员岗位职责
2014/07/01 职场文书
公司委托书格式
2014/08/01 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
综治目标管理责任书
2015/05/11 职场文书
离婚起诉状范本
2015/05/19 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书