bootstrap 学习笔记（一）

来源：互联网发布：ubuntu 断点续传工具编辑：程序博客网时间：2024/06/05 20:00

在此就不做 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 属性idclass元素标签

【媒体查询与 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;}

【元素的隐藏与显示】

超小屏幕
手机(<768px)小屏幕
平板(≥768px)中等屏幕
桌面(≥992px)大屏幕
桌面(≥1200px).visible-xs可见
隐藏
隐藏
隐藏.visible-sm隐藏可见
隐藏隐藏.visible-md隐藏隐藏可见隐藏.visible-lg隐藏隐藏隐藏可见.hidden-xs隐藏可见可见可见.hidden-sm可见隐藏可见可见.hidden-md可见可见隐藏可见.hidden-lg可见可见可见隐藏

【响应式导航条】

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

0 0