详解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实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
详解Javascript继承的实现
Mar 25 Javascript
前端jquery部分很精彩
May 03 Javascript
js实现日历的简单算法
Jan 24 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
vue二级路由设置方法
Feb 09 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
详解vue v-model
Aug 31 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
js实现简易计算器功能
2019/10/18 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
Python高级用法总结
2018/05/26 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
学校消防演习方案
2014/02/19 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
2014年高考决心书
2014/03/11 职场文书
开门红主持词
2014/04/02 职场文书
小学老师对学生的评语
2014/12/29 职场文书
英语复习计划
2015/01/19 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers