首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap基础知识学习笔记

Posted in Javascript onNovember 02, 2016

在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。

以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改

【引用文件】

bootstrap基础知识学习笔记

【页面引用】

路径请自行规划

<script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 
 
<!-- 未压缩 --> 
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> 
<script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 
 
<!--[if lt IE 9]> 
<script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> 
<script src="<%=path%>/js-lib/html5/respond.min.js"></script> 
<![endif]-->

【标准模板】

<!DOCTYPE html> 
<html> 
 <head> 
  <base href="<%=basePath%>"> 
  <meta lang="zh-CN"/> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
   
  <title>bootstrap 模板</title> 
   
  <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> 
 
  <!-- 未压缩 --> 
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> 
  <link rel="stylesheet" type="text/css" href="<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> 
  <script type="text/javascript" src="<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> 
 
  <!--[if lt IE 9]> 
  <script src="<%=path%>/js-lib/html5/html5shiv.min.js"></script> 
  <script src="<%=path%>/js-lib/html5/respond.min.js"></script> 
  <![endif]--> 
   
 </head> 
  
 <body> 
  hello bootstrap! 
 </body> 
</html>

【css选择器优先级】
依次为

style 属性 
id 
class 
元素标签 

【媒体查询与 container 源码】
该样式利用媒体查询，根据页面宽度不同，展示不同

.container { 
 padding-right: 15px; 
 padding-left: 15px; 
 margin-right: auto; 
 margin-left: auto; 
} 
@media (min-width: 768px) { 
 .container { 
 width: 750px; 
 } 
} 
@media (min-width: 992px) { 
 .container { 
 width: 970px; 
 } 
} 
@media (min-width: 1200px) { 
 .container { 
 width: 1170px; 
 } 
}

【12栅格系统】

.row: 一行

.col-md-*: * 为列号

.col-md-offset-*: 列向右移几列的宽度

.col-md-push-*: 向右推（移动）几列

.col-md-pull-*: 向左拉（移动）几列

.clearfix visible-xs: 清除浮动，只在小型屏幕生效

【基础组件5种颜色】

primary(重点蓝)
success(成功绿)
info(信息蓝)
warning(警告橙)
danger(危险红)

【按钮】

<button type="button" class="btn btn-primary">btn-primary</button> 
<button type="button" class="btn btn-success">btn-success</button>

按钮大小分为以下几个尺寸

xs: 超小 
sm: 小型 
缺省: 普通 
lg: 大型 

<button type="button" class="btn btn-primary btn-xs">btn-primary</button> 
<button type="button" class="btn btn-success btn-sm">btn-success</button> 
<button type="button" class="btn btn-success">btn-success</button> 
<button type="button" class="btn btn-success btn-lg">btn-success</button>

bootstrap基础知识学习笔记

【进度条】

进度条需js进行进度变动

<div class="progress progress-striped active"> 
 <div class="progress-bar" style="width: 45%;"> 
  45% Complete 
 </div> 
</div>

bootstrap基础知识学习笔记

【下拉框】

<div class="btn-group"> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
  我的书籍 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 编程精解</a> 
  </li> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 设计模式</a> 
  </li> 
  <li> 
   <a href="javaScript:void(0)">JavaScript 启示录</a> 
  </li> 
  <li class="divider"></li> 
  <li> 
   <a href="javaScript:void(0)">深入理解 bootstrap3</a> 
  </li> 
 </ul> 
</div>

bootstrap基础知识学习笔记

【选项卡】

<ul class="nav nav-tabs" id="myTab"> 
 <li class="active"> 
  <a data-toggle="tab" href="#home">首页</a> 
 </li> 
 <li class=""> 
  <a data-toggle="tab" href="#profile">个人资料</a> 
 </li> 
  
 <li class="dropdown"> 
  <!-- 点击 “我的书籍”， 弹出下拉带错 --> 
  <a data-toggle="dropdown" href="#" class="dropdown-toggle"> 
   我的书籍 
   <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
   <li> 
    <a data-toggle="tab" href="#dropdown1">javaScript 编程精解</a> 
   </li> 
   <li> 
    <a data-toggle="tab" href="#dropdown2">javaScript 设计模式</a> 
   </li> 
    
   <li> 
    <a data-toggle="tab" href="#dropdown3">javaScript 启示录</a> 
   </li> 
   <li> 
    <a data-toggle="tab" href="#dropdown4">深入理解 bootstrap</a> 
   </li> 
  </ul> 
 </li> 
</ul> 
<div class="tab-content" id="myTabContent"> 
 <div id="home" class="tab-pane fade active in"> 
  <p>点击 “首页”显示</p> 
 </div> 
 <div id="profile" class="tab-pane fade"> 
  <p>点击 “个人资料”显示</p> 
 </div> 
 <div id="dropdown1" class="tab-pane fade"> 
  <p>点击 “javaScript 编程精解” 显示</p> 
 </div> 
  
 <div id="dropdown2" class="tab-pane fade"> 
  <p>点击 “javaScript 设计模式” 显示</p> 
 </div> 
 <div id="dropdown3" class="tab-pane fade"> 
  <p>点击 “javaScript 启示录” 显示</p> 
 </div> 
 <div id="dropdown4" class="tab-pane fade"> 
  <p>点击 “深入理解 bootstrap3” 显示</p> 
 </div> 
</div>

bootstrap基础知识学习笔记

data-toggle="tab" href="#home"
可以使用
data-toggle="tab" data-target="#home"
替代，效果相同，js 默认先检测 data-target 属性，如果没有，再检测 href 属性，如果还没有，则默认为父元素

【表格】

<table class="table table-striped table-bordered table-hover table-condensed"> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
 <tr> 
  <td>1</td> 
  <td>2</td> 
  <td>3</td> 
  <td>4</td> 
 </tr> 
</table>

table-striped : 斑马线
table-bordered : 边框
table-hover : 悬浮
table-condensed : 表格紧凑

注意，斑马线与 鼠标悬浮样式，颜色与 白色很接近，所以可能会误认为 table-striped 与 table-hover 没有生效，不起作用，

如果需要明显显示，我们需要重写样式颜色

/** 斑马线 **/ 
.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th { 
 background-color: #EFEFEF; 
} 
/** 悬浮 **/ 
.table-hover > tbody > tr:hover > td, 
.table-hover > tbody > tr:hover > th { 
 background-color: #DFE8F6; 
}

【元素的隐藏与显示】

bootstrap基础知识学习笔记

【响应式导航条】

<div class="navbar navbar-default"> 
 <div class="navbar-header"> 
  <!-- 无论是宽屏还是窄屏，navbar-brand 都会显示 --> 
  <a class="navbar-brand" href="javaScript:void(0)">Brand</a> 
  <!-- .navbar-toggle 样式用于 toggle 收缩的内容， 即 nav-collapse collapse元素 --> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
   <span class="sr-only">Toggle navigation</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
   
 </div> 
 <!-- 屏幕宽度小于 768 时，该DIV 默认隐藏，(单机 icon-bar 图标，可以再展开)， 大于768 时显示 --> 
 <div class="collapse navbar-collapse navbar-responsive-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"> 
    <a href="javaScript:void(0)">主页</a> 
   </li> 
   <li> 
    <a href="javaScript:void(0)">作品</a> 
   </li> 
   <li class="dropdown"> 
    <a href="javaScript:void(0)" data-toggle="dropdown" class="dropdown-toggle"> 
     下拉菜单 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="javaScript:void(0)">子菜单1</a> 
     </li> 
     <li> 
      <a href="javaScript:void(0)">子菜单2</a> 
     </li> 
    </ul> 
   </li> 
   <li> 
    <a href="javaScript:void(0)">图书</a> 
   </li> 
  </ul> 
 </div> 
</div>

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap基础知识学习笔记

- Author -

cdmamata

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
Jan 06 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
详解在React项目中安装并使用Less（用法总结）
Mar 18 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
AngularJS深入探讨scope，继承结构，事件系统和生命周期
Nov 02 #Javascript
Bootstrap table的使用方法
Nov 02 #Javascript
AngularJS指令用法详解
Nov 02 #Javascript
AngularJS表单和输入验证实例
Nov 02 #Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 #Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 #Javascript
JavaScript 数组的深度复制解析
Nov 02 #Javascript
NTP(1) Hive(5) K8s(1) calc(1) RestTemplate(1) HttpClient(1) Windows Server(4) SandBox(1) Windows Server 2022(3) OpenFeign(1)
You might like
JavaScript创建命名空间的5种写法
2014/06/24 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
SeaJS入门教程系列之使用SeaJS（二）
2014/03/03 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JS库之Waypoints的用法详解
2017/09/13 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
pip命令无法使用的解决方法
2018/06/12 Python
python切片（获取一个子列表（数组））详解
2019/08/09 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
美国棒球装备和用品商店：Baseball Savings
2018/06/09 全球购物
乌克兰在线商店的价格比较：Price.ua
2019/07/26 全球购物
六一儿童节主持词
2014/03/21 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
担保书范文
2015/01/20 职场文书
初一年级组工作总结
2015/08/12 职场文书