Bootstrap学习笔记

这两天在学习Bootstrap,学过一遍复习后发现有几个组件知识点记得不是很清楚，就自己重新码了一遍加深印象。所以有了这篇笔记~

一、导航条+滚轮监听

导航条

<div class="navbar navbar-inverse navbar-fixed-top" id="mynav">
		<div class="navbar-header">
			<a href="" class="navbar-brand">
				<img src="images/hu2.webp" style="width:20px;" alt="">
			</a>
		</div>
		<ul class="nav navbar-nav">
			<li><a href="#html5">HTML5</a></li>
			<li><a href="#css3">CSS3</a></li>
			<li class="dropdown">
				<a class="dropdown-toggle" href="#" data-toggle="dropdown">JavaScript</a>
				<ul class="dropdown-menu">
					<li><a href="#jquery">JQuery</a></li>
					<li><a href="#extjs">Extjs</a></li>
					<li><a href="#typescript">TypeScript</a></li>
				</ul>	
			</li>
		</ul>
		<button href="" class="btn navbar-btn pull-right">注&nbsp;册</button>
		<button href="" class="btn navbar-btn pull-right">登&nbsp;录</button>
		<form action="" class="navbar-form pull-right" >
			<input type="text" class="form-control" placeholder="请输入要搜索的内容……">
		</form>
</div>

设置滚轮监听的内容：
关键是为内容区设置data-target="#mynav" data-spy="scroll"属性。

<!-- 滚动监听.scroll -->
<div data-target="#mynav" data-spy="scroll" class="container" style="max-height: 200px;overflow: auto;position: relative;margin-top: 80px;background: lavender;">
	<div id="html5">
		<h3>HTML</h3>
		<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
		</p>
	</div>
	<div id="css3">
		<h3>CSS3</h3>
		<p>CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。</p>
	</div>
	<div id="jquery">
		<h3>JQuery</h3>
		<p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。</p>
	</div>
	<div id="extjs">
		<h3>Extjs</h3>
		<p>extjs是一种软件。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。
功能丰富，无人能出其右。
无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
</p>
	</div>
	<div id="typescript">
		<h3>TypeScript</h3>
		<p>TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。 </p>
	</div>
</div>

实现效果：

二、路径导航（面包屑）

<!-- 路径导航.breadcrumb -->
<ul class="breadcrumb">
	<li><a href="#">首页</a></li>
	<li><a href="#">体育新闻</a></li>
	<li>全运会</li>
</ul>	

实现效果：

三、标签页的切换

html代码：

<!-- 标签页tab -->	
<ul class="nav nav-tabs" id="myTab">
	<li data-toggle="tab"><a href="#tab1">标签页1</a></li>
	<li data-toggle="tab"><a href="#tab2">标签页2</a></li>
	<li data-toggle="tab"><a href="#tab3">标签页3</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="tab1">标签页1的内容</div>
	<div class="tab-pane" id="tab2">标签页2的内容</div>
	<div class="tab-pane" id="tab3">标签页3的内容</div>
</div>

JavaScript代码：

$("#myTab li a").on('click',function(e){
   
	e.preventDefault();
	$(this).tab('show');
});

实现效果：

四、巨幕

<!-- 巨幕.jumbotron -->
<!-- <div class="container"> -->
	<div class="jumbotron" style="height:200px;background: linear-gradient(to bottom,lightgreen,white);">
		<h2>巨幕大标题</h2>
		<p>巨幕内容</p>
		<a href="" class="btn" role="button