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 ...
随机推荐
- NASA的CTO——开源软件使我们诚实
Chris C.Kemp,谷歌设置新职位CTO让他领导 原文: NASA's CTO: Open source software keeps us honest 作者: Shawn Freeman 译 ...
- centos 7之文件共享
一,安装过程 1.在VirtualBox的软件菜单里面选择 “设备”--“存储”,添加VBoxGuestAdditions.iso(在VirtualBox目录下). 2.在桌面上出现一个光驱 ...
- xgene：疾病相关基因，耳聋，彩色，老年痴呆，帕金森
神经元的传递:一个下游神经元,它接受其上游神经元的各个突触传过来的信号,然而,每个突触对该下游神经元的激活权重是不同的. 从神经网络的本质上说,当人连续.多次遭受失败的时候,大脑内就会释放大量的抑制性 ...
- 16.Tomcat弱口令 && 后台getshell漏洞
Tomcat7+ 弱口令 && 后台getshell漏洞 Tomcat版本:8.0 环境说明 Tomcat支持在后台部署war文件,可以直接将webshell部署到web目录下.其中, ...
- 1. csrf 简介
浅谈CSRF CSRF是什么? (Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 年曾被列为互联网 大安全隐患之一,也被称为“One Click A ...
- 7.26实习培训日志-Oracle SQL(二)
Oracle SQL(二) 条件表达式 CASE 语句 或者DECODE 函数,两者均可实现 IF-THEN-ELSE 的逻辑,相比较而言,DECODE 更加简洁 SELECT last_name , ...
- Win10不能直接拖文件/Foxmail不能拖文件解决办法
在桌面新建一个文本文档 打开文本文档复制下面的文字然后保存. Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\M ...
- hdu1059
#include <stdio.h> #include <string.h> #define MAXN 120005 int main() { int num[7]; int ...
- 一个使用MVC3+NHibernate “增删改查” 的项目（修正版）
前言: 谈到NHibernate大伙并不陌生,搞Java的更是清楚,Hibernate是一个目前应用的最广泛的开放源代码的对象关系映射框架,它对Java的JDBC(类似于ADO.Net)进行了非常 ...
- 【mysql模糊查询的几种方式】
select * from activyty_code where acname like '%yj%' 1:%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分 ...