详解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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
再探JavaScript作用域
Sep 24 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
zTree节点文字过多的处理方法
Nov 24 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 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
用文本作数据处理
2006/10/09 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php生出随机字符串
2017/07/06 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python urllib2运行过程原理解析
2020/06/04 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
RealTek面试题
2016/06/28 面试题
五分钟演讲稿
2014/04/30 职场文书
生物学专业求职信
2014/07/23 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
python Tkinter模块使用方法详解
2022/04/07 Python
python中pycryto实现数据加密
2022/04/29 Python