详解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之九 一些瑕疵说明
Jun 21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
vue router 组件的高级应用实例代码
Apr 08 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
基于empty函数的判断详解
2013/06/17 PHP
详解json在php中的应用
2018/09/30 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
js 学习笔记(三)
2009/12/29 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
在 Express 中使用模板引擎
2015/12/10 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
django 创建过滤器的实例详解
2017/08/14 Python
python读取文本中的坐标方法
2018/10/14 Python
Python File(文件) 方法整理
2019/02/18 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
孔庙导游词
2015/02/04 职场文书
2015大学迎新标语
2015/07/16 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
nginx lua 操作 mysql
2022/05/15 Servers