Bootstrap学习笔记（三）
三、组件
1、图标字体
图标字体本质是文字，而不是图形！可以无限放大或修改颜色。
使用方式：<span class="glyphicon glyphicon-XXX"></span>
一组span标签只能放置一个图标
2、按钮组件
<div class="btn-group">
.btn
...
.btn
</div>
水平按钮组：.btn-group
竖直按钮组：.btn-vertical
两端对齐的按钮组：.btn-group .btn-group-jusitified
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<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>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h2>组件 —— 按钮组</h2>
<h3>水平按钮组</h3>
<div class="btn-group">
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-play"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-pause"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-stop"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-forward"></span>
</a>
</div>
<hr>
<h3>两端调整对齐</h3>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-play"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-pause"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-stop"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-forward"></span>
</a>
</div>
<hr>
<h3>竖直按钮组</h3>
<div class="btn-group-vertical">
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-backward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-play"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-pause"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-stop"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-fast-forward"></span>
</a>
<a href="#" class="btn btn-info">
<span class="glyphicon glyphicon-step-forward"></span>
</a>
</div>
</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
3、下拉菜单
下拉菜单必需的三级结构：
<div class="dropdown"> //相对定位的父元素
<a datatoggle="dropdown">触发元素</a> //触发元素
<div/ul class="dropdown-menu"> //绝对定位默认隐藏的菜单
隐藏元素
</div/ul>
<div>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>下拉菜单</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>下拉菜单</h1>
<div class="dropdown">
<a data-toggle="dropdown" href="#" class="btn btn-default">产品大全
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">冰箱</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">尿不湿</a></li>
<li><a href="#">奶粉</a></li>
</ul>
</div>
</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
4、媒体对象
默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。
<div class="meida">
<div class="mdia-left"></div>
<div class="mdia-body"></div>
<!-- <div class="mdia-right"></div> -->
</div>
媒体对象列表：用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。
<div class="media-list">
<div class="media">……</div>
<div class="media">……</div>
<div class="media">……</div>
</div>
5、列表组
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。
最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。
用于ul/ol的列表组：
<ul class="list-group">
<li class="list-group-item">
</ul>
用于div的列表组
<div class="list-group">
<a class="list-group-item" href="#">
</div>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表组</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Bootstrap组件——列表组</h1>
<h3>用于ul/ol的列表组</h3>
<ul class="list-group">
<li class="list-group-item">豆蔻年华</li>
<li class="list-group-item">青葱岁月</li>
<li class="list-group-item">峥嵘岁月</li>
<li class="list-group-item">人之暮年</li>
</ul>
<ul class="list-group">
<li class="list-group-item"><a href="#">豆蔻年华</a></li>
<li class="list-group-item"><a href="#">青葱岁月</a></li>
<li class="list-group-item"><a href="#">峥嵘岁月</a></li>
<li class="list-group-item"><a href="#">人之暮年</a></li>
</ul> <h3>用于div的列表组</h3>
<div class="list-group">
<a class="list-group-item" href="#">豆蔻年华</a>
<a class="list-group-item active" href="#">青葱岁月</a>
<a class="list-group-item" href="#">峥嵘岁月</a>
<a class="list-group-item" href="#">人之暮年</a>
</div>
</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
6、导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
有两种导航组件：
--胶囊式导航组件
<ul class="nav nav-pills"></ul>
--标签页式导航组件
<ul class="nav nav-pills"></ul>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>媒体对象</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Bootstrap组件——导航组件</h1>
<h2>标签页式的导航</h2>
<ul class="nav nav-tabs">
<li><a data-toggle="tab" href="#">10元套餐</a></li>
<li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
<li><a data-toggle="tab" href="#">30元套餐</a></li>
</ul> <h2>胶囊式的导航</h2>
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#">10元套餐</a></li>
<li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
<li><a data-toggle="tab" href="#">30元套餐</a></li>
</ul> <h2>标签页式的导航(满屏)</h2>
<ul class="nav nav-tabs nav-justified">
<li><a data-toggle="tab" href="#">10元套餐</a></li>
<li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
<li><a data-toggle="tab" href="#">30元套餐</a></li>
</ul> <h2>竖直排布的胶囊式导航</h2>
<ul class="nav nav-pills nav-stacked col-sm-2">
<li><a data-toggle="tab" href="#">10元套餐</a></li>
<li class="active"><a data-toggle="tab" href="#">20元套餐</a></li>
<li><a data-toggle="tab" href="#">30元套餐</a></li>
</ul>
</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
7、响应式导航条
导航条：navbar
响应式导航条组成：导航条的主体(相当于文章标题)+内容组成(相当于列表项)
==》 navbar=navbar-header+navbar-collapse
导航条的主体组成：网站LOGO+菜单切换按钮(只在xs屏幕下显示)
==》 nav-header=nav-brand+nav-toggle
内容组成：导航+表单+超链接+文本+……
==》 nav-collopse=navbar-nav+navbar-form+navbar-link+nav-text+……
导航条的基本结构——看XS中展开后的效果：
Bootstrap中提供的导航条的分类：
1) 按照颜色来分：
nav-dafault：浅色底、深色字
nav-inverse：深色底、浅色字
2) 按照位置来分：
顶部导航条
底部导航条
3) 按照定位(position)方式分
相对定位：relative(默认)，占布局空间，随内容滚动
固定定位：fixed，不占布局空间，不随内容的滚动而滚动
navbar-fixed-top
navbar-fixed-bottom
注意：固定定位的导航条不占布局空间，body必须设置足够的margin-top/bottom，否则部分内容会被导航条覆盖。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<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>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9] -->
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<!-- [endif]-->
<style>
body {
/*margin-top: 50px;*/
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">TEARENA</a>
<a href="#" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">HOME</a></li>
<li class="active"><a href="#">NEWS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">PRODUCTS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">冰箱</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">空调</a></li>
<li><a href="#">箱包</a></li>
<li><a href="#">奶粉</a></li>
</ul>
</li>
</ul> <a href="#" class="navbar-link navbar-text navbar-right">Register</a>
<span class="navbar-right navbar-text">|</span>
<button class="navbar-right navbar-btn btn btn-success btn-sm">Login</button> <form action="" class="navbar-form navbar-right">
<label for="search" class="sr-only">请输入搜索内容：</label>
<div class="input-group">
<input type="text" class="form-control search" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div> <div class="container">
<h1>Bootstrap组件——响应式导航条</h1>
</div> <div class="navbar navbar-fixed-bottom navbar-inverse">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="img/logo.png" style="margin-top: -16px;"></a>
<a href="#" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li class="active"><a href="#">NEWS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">PRODUCTS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">冰箱</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">空调</a></li>
<li><a href="#">箱包</a></li>
<li><a href="#">奶粉</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
8、其他
面包屑导航：ul/ol.breadcrumb
数字型分页：ul/ol.pagination
翻页行分页条：ul/ol.page
标签：<span class="label">提示文字</span>
徽章：<span class="badge">数字</span>
巨幕：<div class="jumbotron"></div>
页头：<div class="page-header"></div>
水井：div.well
进度条：.progress>.pregress-bar
缩略图：<div/a class="thumgnail"></div/a>
Bootstrap学习笔记（三）的更多相关文章
- bootstrap学习笔记<三>（文本，代码域，列表）
文本对齐 .text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐 <p class="text-left ...
- Bootstrap学习笔记(三) 网格系统
4-1实现原理 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Boo ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
随机推荐
- CodeForces 492D Vanya and Computer Game (思维题)
D. Vanya and Computer Game time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- 【转】JAVA输出内容打印到TXT以及不同系统中如何换行
JAVA输出内容打印到TXT以及不同系统中如何换行 http://xiyang.09.blog.163.com/blog/static/59827615201172552755293/ 2011-08 ...
- Makefiles
A tutorial by example Compiling your source code files can be tedious, specially when you want to in ...
- Apple Swift中文入门教程【转发】
1 简介 今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS& ...
- 【分析】浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别（SamWang）
[分析]浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别(SamWang) 今天无意中看到有关Invoke和BeginInvoke的一些资料,不太清楚它们之间 ...
- Libvirt代码架构
Libvirt介绍 参考资料 Libvirt学习 通过virsh了解libvirt api的调用方式 通过virHypervisorDriver了解libvirt api的实现 virsh代码阅读 通 ...
- 如何使用ROS查找rgbdslam代码包框架的输入
我想这是一个天大的错误,在没有对整个ROS下的代码有一个整体理性的认知时,我使用感性认知. 由于在跑他的测试代码时,只替换了两个节点的名称,相当于remap了它,以为就可以跑了,结果是不行的. 然后用 ...
- Wannafly summer camp Day2I(思维）
#include<bits/stdc++.h>using namespace std;int a[1000007],b[1000007],c[1000007];int find_max(i ...
- 对于多线程程序，单核cpu与多核cpu是怎么工作的
此文中的大部分资料来自于网络上,我只是觉得把有道理的整理一下,方便以后查阅. 1.多线程在单核和多核CPU上的执行效率问题的讨论a1: 多线程在单cpu中其实也是顺序执行的,不过系统可以帮你切换那个执 ...
- oracle语句解析顺序