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 ...
随机推荐
- AngularJs(Part 11)--自定义Directive
先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefiniti ...
- storm shell命令源码分析-shell_submission.clj
当我们在shell里执行storm shell命令时会调用shell_submission.clj里的main函数.shell_submission.clj如下: shell_submission.c ...
- 使用Cors后台设置WebAPI接口跨域访问
昨天根据项目组前端开发工程师反映,在浏览器端无法直接使用ajax访问后台接口获取数据,根据他的反映,我查阅了相关跨域的解决方案: 一:使用jsonP,但是jsonP只能使用GET请求,完全不符合我项目 ...
- 2. DVWA亲测命令执行漏洞
先看low级: 提示让我们输入一个IP地址来实现ping,猜测会是在系统终端中实现的, 我们正常输入127.0.0.1: 那我们就可以利用这个使用其他CMD命令 我们输入127.0.0.1& ...
- jQuery学习1
学习jQuery的过程中发现了一个博客把jquery的要点整理的很不错,摘抄其精华以备学习.感谢:http://blog.csdn.net/wph_1129/article/details/59932 ...
- vue入门(一)----组件
由于工作需要,最近在写一些前端的东西.经过向开发经验丰富的前端工程师的请教之后,得出一个结论----2016年前端被玩坏了,其实对于我来说我并不是太了解这句话的深刻含义,只是觉得是不是因为前端技术突飞 ...
- nginx配置同一域名下，共存2个nodejs项目
项目背景: 1.官网需要改版,使用nodejs nuxt框架进行重构 2.官网改版没有全部完成.但需要上线首页 项目需求: 1.让首页内容显示为新项目 2.让老官网的内容可以被访问到(比如www.n. ...
- Note: Eleos: ExitLess OS Services for SGX Enclaves
Eleos increased I/O and memory intensive SGX program execution performance with In-enclave system ca ...
- 反射实现增删改查（DAO层）——查询数据
先贴出代码,后续补充自己的思路.配置文件.使用方式: /** * * 数据查询 * */ @Override public List<?> queryObject(List<Map& ...
- luogu3224 永无乡（动态开点，权值线段树合并）
luogu3224 永无乡(动态开点,权值线段树合并) 永无乡包含 n 座岛,编号从 1 到 n ,每座岛都有自己的独一无二的重要度,按照重要度可以将这 n 座岛排名,名次用 1 到 n 来表示.某些 ...