bootstrap 学习笔记（一）

最新推荐文章于 2018-09-29 23:18:44 发布
最新推荐文章于 2018-09-29 23:18:44 发布
阅读量986 收藏 1
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap 基础 教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdmamata/article/details/52943369
版权

在此就不做 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;
}


【元素的隐藏与显示】

 超小屏幕
手机(<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>




cdmamata
关注
专栏目录
Bootstrap学习笔记
qq_51861704的博客
05-17 449
1：背景 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如W.
bootstrap学习笔记
06-17
在“Bootstrap学习笔记”中，作者强调了为什么应该使用Bootstrap，并介绍了其包内容和如何通过在线实例快速上手。学习笔记中还包含了关于Bootstrap环境的安装指南，包括如何下载Bootstrap和理解其文件结构。作者建议...
专题5：Bootstrap学习笔记
日月 的专栏
01-17 2483
一、布局： 1.12列栅格系统，支持列偏移             ...         ...     2.划定内容区域                      ...              3.支持流式布局
Bootstrap学习笔记（一）
雁过无声的博客
09-29 143
版本V3.3.7 可以直接下载生产环境。 使用引用css文件即可 &lt;link href="bootstrap.mini.css"&gt; Bootstrap使用H5的文档类型 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; ... &lt;/html&gt; 移动设备优先需要添加 &lt;meta name="
bootstrap学习笔记之初识bootstrap
01-19
Bootstrap是一款目前非常流行的前端框架，简单的说，就是html,css,javascript的工具集，我们可以用bootstrap搭建出简洁，清新的网站或软件界面，有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了。...
分享bootstrap学习笔记心得(组件及其属性)
11-29
Bootstrap是一种web框架，是基于HTML,CSS和JS的一种目前较为流行的前端框架。 Bootstrap包含有丰富的组件，根据提供的组件，开发者可以更加快速、便捷地搭建自己心仪的网站。通常包括有以下常用组件：下拉菜单、按钮...
bootstrap学习笔记(一)
码农1425的博客
11-13 684
BOOTSTRAP第一天笔记 响应式页面 响应式页面概述 1. 什么是响应式页面 响应式网页（RWD，Responsive Web Design），2010年5月由Ethan Marcotte提出。简而言之，就是一个网站能够针对多个终端提供不同的显示样式，而不是针对每个终端制作一个特定的版本。 由于智能手机和平板电脑的兴起，网站页面的制作不仅要满足PC端浏览器的显示，还要满足智能手机浏览器的显示或者
BootStrap学习笔记
宇默
05-13 290
        前言:BootStrap设计的页面可以在不同的设备上正常访问,比如:手机,pad,电脑上都可以浏览这个网页,而不影响正常的浏览的方式. 这个开发模式称为响应式页面开发BootStrap官网:http://www.bootcss.com  使用方式:&lt;!-- 最新版本的 Bootstrap 核心 CSS 文件 --&gt; &lt;link rel="stylesheet" h...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值