详解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替换table中的内容并显示进度条的代码
Aug 02 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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
php explode函数实例代码
2012/02/27 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python处理cookie详解
2014/02/07 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
机械专业个人求职自荐信格式
2013/09/21 职场文书
人事专员岗位职责
2013/11/20 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
三年级语文教学反思
2014/02/01 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
通知书大全
2015/04/27 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
python入门之算法学习
2021/04/22 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技