bootstrap 笔记3
bootstrap layout
Bootstrap Glyphicons bootstrap字体图标
1.definition：·字体图标是在web项目中使用的图标字体
2.css规则解释
3.syntax：
<span class="glyphicon glyphicon-search"></span>
4.定制字体图标
example：
<button tvpe="button" class="btn btn-primary btn-1g"> <span class="gyphicon glyphicon-user"></span> User </button>
定制字体尺寸：font-size
定制字体颜色：color
应用文本阴影：text-shadow
Bootstrap Dropdowns bootstrap 下拉菜单
1.definition:下拉菜单，以列表格式显示链接的上下文菜单。
2.example：
<!DOCTYPE html> <html> <head> <title>Bootstrap实例-下拉菜单(Dropdowns) </title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/iquery.min.is"></script> <script src="/bootstrap/is/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"data-toggle="dropdown">主题<span class="caret">s/span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Javak</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据挖掘</a></1i> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">数据通信/网络</a></li> <li role="presentation" class="divider"></1i> <1i role="presentation"><a role="menuitem" tabindex="-1" href="#">分离的链接</a></1i> </ul> </div> </body> </html>
3.样式
对齐：
向右对齐 .pull-right添加在dropdown-menu class 类
<ul class="dropdown-menu pull-right" role= "menu">
标题：
dropdown-header向下拉菜单的标签区域添加标题
<li role="presentation" class="dropdown-header">
bootstrap button bootstrap 按钮组
1.按钮组允许讲多个按钮堆叠在同一行上
2.一些主要的class
3.按钮组
1）基本的按钮组
<div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div>
2）按钮工具栏：获得更复杂的组件
<div class="btn-toolbar" role="toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮1 </button> <button type="button" class="btn btn-default">按钮2</button> <button type="button" class="btn btn-default">按钮3 </button> </div> </div>
3)按钮的大小 btn-group-*
4)按钮的嵌套 btn-group 嵌套一个btn-group
5)垂直的按钮 btn-group-vertical
<div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮1</button> <button type="button" class="btn btn-default">按钮2</button> </div>
6)bootstrap 按钮下拉菜单
在一个.btn-group中放置按钮和下拉菜单
基本的——
<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" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
分割的——
<div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn=default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉菜单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>
7)按钮下拉菜单的大小
.btn-large .btn-sm或者.btn-xs
8)按钮上拉菜单
向.btn-group容器添加.dropup即可
bootstrap input bootstrap 输入框组
note:避免使用<select>元素；不要向表单组应用输入框组的class，输入框组是一个孤立的组件
1）基本的输入框组
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control placeholder="twittorhandle"> </div>
<span>和<input>元素放置的次序影响排版
2）输入框的大小
向,input-group添加相对与表单大小的class(input-group-lg input--group-sm input-group-xs)
3)单选框和复选插件（将其作为输入框组的前缀或者后缀元素）
<div class="input-group"> <span class="input-group-addon"> <input type="checkbox|radio"> </span> <input type="text" class="form-control"> </div>
4)按钮插件（同上）
note：不能用input-group-addon,而要使用input-group-btn
基本——
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go! </span> <input type="text" class="form-control"> </div>
带有下拉菜单的——
<div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 默认<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> <input type="text" class="form-control"> </div> </div>
分割的——
（参照其上）
Bootstrap Navigation Element bootstrap 导航元素
1.table navigation or labels 表格导航或标签
创建一个标签式的导航菜单:
以一个带有class .nav的无序列表开始
添加class .nav-tabs
<ul class="nav nav-tabs"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
2.capsule navigation menu 胶囊式的导航菜单
1）基本的导航式菜单
将nav-tabs改为nav-pills即可
example：文件中
<ul class="nav nav-pills"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
2)垂直的胶囊式导航菜单
在使用nav-pills的同时加上 .nav-stacked 即可
<ul class="nav nav-pills nav-stacked">
3）两端对齐的导航
在屏幕宽度大于768px时，通过分别使用.nav, .nav-tabs或.nav, .nav-pills的同时,使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽。
<ul class="nav nav-pills/nav-tabs nav-justified"> <li class="active"><a href="#">home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> </ul>
4)diabled links禁用链接
每个.nav class,如果添加 disabled class,则会创建一个灰色的链接,同时禁用了该链接的:hover状态
<li class="disabled"><a href="#">V(禁用链接</a></li>
3.Drop-down menu 下拉菜单
创建有下拉菜单的标签
以一个带有class.nav的无序列表开始
添加class.nav-tabs.
添加带有.dropdown-menu class的无序列表
<ul class="nav nav-tabs|nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div>
bootstrap Navigation Bar bootstrap 导航栏
1.默认的导航栏
创建一个默认的导航栏：
向<nav>标签添加class.navbar, .navbar-default
向上面的元素添加role="navigation",有助于增加可访问性
向<div>元素添加一个标题class .navbar-header,内部包含带有class navbar-brand的<a>元素。这会让文本看起来更大一号。
为了向导航栏添加链援,只需要简单地添加带有class navbar-nav的无序列表即可
<nav class="navbar navbsr-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class=“nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">IOS</a></li> <li><a href="#">VB.Net</a></li> <li class="dropdown"> <a class="dropdown-toggle " data-toggle="dropdown" href="#">java<span class="caret"> </span> </a> <ul class="dropdown-menu"> <li><a href="#" >Swing</a></li> <li><a href="#" >JMeter</a></li> <li><a href="#" >EJB</a></li> <li class="divider"></li> <li><a href="#" >分离的链接</a></li> </ul> </li> </div>
2）响应式的导航栏
使用bootstrap折叠插件（collapse）
折叠起来的导航栏实际上一个带有class .navbar-toggle和两个data-元素的按钮
3）导航栏中的表单
导航栏中的表单时使用.navbar-form class
4）导航栏中的按钮
可以使用class .navbar-btn 向不在form中的<button>元素添加按钮，按钮在导航栏上垂直居中，navbar-btn可以用在<a>和<input>元素上
note：不要在.navbar-nav内的<a>上使用.navbar-btn
5)导航栏中的文本
使用class .navbar-text
6)非导航链接
class .navbar-link为默认的和倒装的导航栏添加适当的颜色
7）组件对齐方式
对齐：class .navbar-right .navbar-left
8)固定到顶部与底部
bootstrap导航栏可以动态定位，默认情况下，它是块级元素，基于在html中放置的位置定位的。
固定到顶部：向.navbar class 添加 class navbar-fixed-top
note:防止导航栏与页面主体中的其他内容的顶部相交错，向<body> tag 添加至少50像素的内边距
固定到底部：向.navbar class 添加 class navbar-fixed-buttom
8)静态的顶部
能随着页面一起滚动的导航栏，添加.navbar-static-top
(不要求向<body>添加内边距）
9）倒置的导航栏
创建一个带有黑色背景白色文本的倒置的导航栏：向.navbar class 添加.navbar-inverse class
note:防止导航栏与页面主体中的其他内容的顶部相交错，向<body> tag 添加至少50像素的内边距
5.bootstrap breadcrumbs面包屑导航
面包屑导航时一种基于网站层次信息的显示方式。表示当前页面在层次结构中的位置
bootstrap 中的面包屑导航时一个简单的带有.breadcrumb class的无序列表
bootstrap paging bootstrap分页
分页（pagination）：是一种无序列表
处理分页的class
1）默认的分页
class .pagination
2)分页的状态
class .disabled ; .active
3)分页的大小
class .pagination-*
.pagination-lg;.pagination.sm
4）翻页（pager）
翻页：创建一个简单的分页链接为用户提供导航
默认的翻页：pager
对齐的链接：class .previous .next的用法
翻页的状态： class .disabled
bootstrap label bootstrap 标签
标签：可以用于计数、提示或者页面上其他的标记。 class .label：显示标签
改变标签的外观：class label-default label-primary label-success label-info label-warning label-danger
bootstrap badges bootstrap 徽章
1）bootstrap会长和标签相似，主要区别在于徽章的边角更加圆滑
徽章主要用于突出显示新的或未读的项，使用徽章：class=“badge”
2）激活导航状态
可以在激活状态的胶囊式导航和列表导航中放置徽章，使用<span class="badge">来激活链接
bootstrap jumbotron bootstrap 超大屏幕
1）使用超大屏幕的步骤
创建一个带有class jumbotron.的容器<div>
除了更大的<h1>,字体粗细font-weight被减为200px
2)获得占用全部宽度且不带圆角的超大屏幕：在所有.container class 外使用 jumbtron class
bootstrap page header bootstrap 页面标题（页眉）
页面标题功能：在网页标题四周添加适当的间距
使用:将 class .page-header 放在<div>中
bootstrap 缩略图
1）使用缩略图的步骤
在图像周围添加带有class .thumbnail的标签。
这会添加四个像素的内边距(padding)和一个灰色的边框。
当鼠标悬停在图像上时,会动画显示出图像的轮廓。
2）添加自定义内容
可以向缩略图中添加各种HTML内容，比如标题、段落和按钮
步骤：
把带有class .thumbnail的<a>标签改为<div>
在该<div>中，可以添加任何你想要添加的东西
如果要对图像进行分组，放置在一个无序列表中，且每一个列表项向左浮动
bootstrap alerts bootstrap 警告
1）警告向用户提供了一种定义消息样式的方式，他们为典型的用户操作提供了上下文反馈
2）创建一个内联的可取消的警告框：Alert jQuery插件
3）添加一个基本的警告框：向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一
4）可取消的警告：
向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框
同时向上面的<div> class添加可选的.alert-dismissable.
添加一个关闭按钮
important code:
<button type="button"class="close" date-dismiss="alert" aria-hidden="true"> × </button>
note:请确保使用带有 data-diasmiss="alert" data 属性的<button>元素
5)警告中的链接
步骤：
向一个<div>中添加 .alert class和四个上下文 class (.alert-success .alert-info .alert-warning .alert-danger)之一来完成一个基本的警告框
使用 .alert-link实体类来快速提供带有匹配颜色的链接
bootstrap progress bar bootstrap进度条
1）默认的进度条
创建一个基本进度条的步骤：
添加一个带有class.progress的<div>
在<div>内添加一个带有class.progress-bar的空的<div>
添加一个带有百分比表示的宽度的style属性
2)交替的进度条
创建一个交替的进度条：
添加一个带有class.progress的<div>
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
3)条纹的进度条
创建一个条纹的进度条：
添加一个带有class.progress和.progress.striped的<div>
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
4)动画的进度条
创建一个动画的进度条：
添加一个带有class.progress和.progress-striped 的<div>,同时添加class.active
在<div>内添加一个带有class.progress-bar和progress-bar-*(*可以是success ,info,warning,danger)的<div>
添加一个带有百分比表示的宽度的style属性
5)堆叠的进度条
将多个进度条放在相同的.progress中即可实现堆叠
bootstrap media object bootstrap 多媒体对象
1）两种形式来设置多媒体对象
.media:允许将多媒体对象里的多媒体（图像、音频、视频）浮动到内容区块的左边或者右边
.media-list：可用于评论列表与文章列表
bootstrap list Group bootstrap列表组
1)创建一个基本的列表组
向元素<ul>添加class .list-group
向<li>添加 class .list-group-item
2)向列表组添加徽章
在<li>元素中加入<span class="badge">
3)向列表组添加链接
4)向列表组添加自定义内容
bootstrap panels bootstrap 面板
面板足迹用于讲DOM组件插入到一个盒子里
1）创建一个基本的面板
向<div>元素中添加class.panel和class.panel-default即可
2)添加面板标题
使用.panel-heading class
使用带有.panel-title class的<h1>-<h6>添加预定义样式的标签
3）面板脚注
把按钮或者附文本放在class.panel-footer的<div>中即可
4）带语境色彩的面板
语境状态类：panel-primary panel-successs panel-info panel-warning panel-danger
5）带有表格的面板
创建一个无边框的表格：class.table
有一个包含.panel-body的<div>，向变革的顶部添加额外的边框用来分割
若无，组件会无中断地从面板头部移动到表格
6）带有列表组的面板
bootstrap well
well是一种会引起内容凹陷显示或插图效果的容器<div>
直接将内容放在class well的<div>中即可
1）修改尺寸大小：well-lg well-sm