首页
所有分类
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 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
在chrome浏览器中，防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
protocol(1) Windows server 2003(1) Outlook(1) ACID(1) sentinel(1) 黑屏(2) appdata(1) mysqldump(1) minio(1) sock(2)
You might like
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
[01:01]2020完美高校联赛（秋）西安落幕
2021/03/11 DOTA
Python CSV模块使用实例
2015/04/09 Python
python 链接和操作 memcache方法
2017/03/04 Python
使用python实现链表操作
2018/01/26 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python设置值及NaN值处理方法
2018/07/03 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
美国一家全面的在线零售鞋类公司：SHOEBACCA
2017/01/06 全球购物
澳大利亚最好的厨具店：Kitchen Warehouse
2018/03/13 全球购物
华为c/c++笔试题
2016/01/25 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
珍惜资源保护环境的建议书
2014/05/14 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android