编程 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 相关文章推荐

js 操作css实现代码

Jun 11 Javascript

JavaScript 计算图片加载数量的代码

Jan 01 Javascript

JavaScript判断textarea值是否为空并给出相应提示

Sep 04 Javascript

jquery简单实现网页层的展开与收缩效果

Aug 07 Javascript

JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

Jul 01 Javascript

js时间戳格式化成日期格式的多种方法介绍

Feb 16 Javascript

Bootstrap输入框组件使用详解

Jun 09 Javascript

纯js实现的积木(div层)拖动功能示例

Jul 19 Javascript

vue在手机中通过本机IP地址访问webApp的方法

Aug 15 Javascript

vue组件tabbar使用方法详解

Nov 06 Javascript

vue柱状进度条图像的完美实现方案

Aug 26 Javascript

vue 使用 vue-pdf 实现pdf在线预览的示例代码

Apr 26 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