详解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最佳实践完整篇
Aug 20 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
javascript倒计时效果实现
Nov 12 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Vue实现简单的拖拽效果
Aug 25 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php调用mysql存储过程
2007/02/14 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php学习笔记之面向对象
2014/11/08 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python输入错误后删除的方法
2019/10/12 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python3运算符常见用法分析
2020/02/14 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
关于VPN
2012/06/10 面试题
总经理助理岗位职责范本
2014/07/20 职场文书
个人总结与自我评价
2015/02/14 职场文书
围城读书笔记
2015/06/26 职场文书
90条交通安全宣传标语
2019/10/12 职场文书