bootstrap基础知识学习笔记

更新时间：2016年11月02日 15:35:52 作者：cdmamata

这篇文章主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

【引用文件】

【页面引用】

路径请自行规划

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

【进度条】

进度条需js进行进度变动

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

【下拉框】

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

【选项卡】

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

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; 
}

【元素的隐藏与显示】

【响应式导航条】

<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实战教程

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

您可能感兴趣的文章:

JS获取文件大小方法小结
这篇文章主要介绍了JS获取文件大小的方法,结合实例总结分析了JavaScript获取文件大小的常用技巧,并给出了判断文件格式与大小的完整实例供读者参考,需要的朋友可以参考下
2015-12-12
JavaScript获取元素尺寸和大小操作总结
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下
2015-02-02
JavaScript Map实现原理与底层结构详解
哈希表（也称为哈希表）是一种基于键直接访问内存存储位置的数据结构。也就是说，它通过计算一个键值函数来加速查找，该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数，记录数组称为散列表
2022-09-09
一文详解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四个不同的数据结构，它们都有不同的特点和用途，本文详细介绍了Map、Set、WeakMap和WeakSet的用法及区别，需要的朋友可以参考下
2023-04-04
JavaScript实现基础排序算法的示例详解
这篇文章主要为大家详细介绍了如何利用JavaScript实现基础排序算法，如：冒泡排序、选择排序、插入排序和快速排序，感兴趣的可以了解一下
2022-06-06
js中如何将多层嵌套的数组转换为一层数组
这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
利用JavaScript实现春节倒计时效果(移动端和PC端)
这篇文章主要介绍了通过Html+Css+js如何实现春节倒计时效果，本文同时介绍了移动端和PC端两种效果，感兴趣的同学可以跟随小编一起动手试试
2022-01-01
微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)
小程序webView中嵌套H5页面,难免会遇到小程序与h5页面进行数据通信或交互的场景,下面这篇文章主要给大家介绍了关于微信小程序与webview H5交互的相关资料,内嵌H5跳转原生页面,需要的朋友可以参考下
2022-11-11
BootStrap中Table隐藏后显示问题的实现代码
这篇文章主要介绍了BootStrap中Table隐藏后显示问题的实现代码,需要的朋友可以参考下
2017-08-08
seajs和requirejs模块化简单案例分析
这篇文章主要介绍了seajs和requirejs模块化,结合具体案例形式分析了seaj和requirejs模块化应用的相关操作技巧与使用注意事项,需要的朋友可以参考下
2019-08-08

bootstrap基础知识学习笔记

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具