详解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 打开页面window.location和window.open的区别
Mar 17 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
织梦模板标记简介
2007/03/11 PHP
PHP中ADODB类详解
2008/03/25 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Vue精简版风格概述
2018/01/30 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
详解Python迭代和迭代器
2016/03/28 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python3的socket使用方法详解
2020/02/18 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
最新大学职业规划书范文
2013/12/30 职场文书
文秘大学生求职信
2014/02/25 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Java 死锁解决方案
2022/05/11 Java/Android