详解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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python gdal安装与简单使用
2019/08/01 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Python 合并拼接字符串的方法
2020/07/28 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
合同专员岗位职责
2013/12/18 职场文书
生日派对邀请函
2014/01/13 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
Python基础之进程详解
2021/05/21 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL