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 ...
随机推荐
- Javax ws 01
1 EndPoint发布服务 package com.gosaint.provider; import javax.jws.WebService; /** * @Authgor: gosaint * ...
- CodeForces 1107F. Vasya and Endless Credits
题目简述:给定 $n \leq 500$ 个贷款方式,其中第$i$个贷款额为$a_i$元,需要$k_i$个月偿还,每月还贷$b_i$元.在每个月月初可申请其中一个贷款,而在每个月月底时需要还贷.求:( ...
- shell script-条件语句、循环语句
条件语句 #!/bin/bash read -p "input your name:" name #第一种判断 if [ "$name" == "Mi ...
- MySQL在linux下安装
mysql在linux下的安装 安装环境:系统是 centos6.5 1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloa ...
- 【vue2.X+iview2.x】iView在非 template/render 模式下标签的转化
iView在非 template/render 模式下标签的转化. 以下组件,在非 template/render 模式下组件名要分隔: DatePicker:date-picker FormItem ...
- 13、Actor
1.介绍 Scala的Actor类似于Java中的多线程编程.但是不同的是,Scala的Actor提供的模型与多线程有所不同. Scala的Actor尽可能地避免锁和共享状态,从而避免多线程并发时出现 ...
- HDU 5980 Find Small A (水题)
题意:众所周知,字符 'a' 的ASCII码为97.现在,找出给定数组中出现了多少次 'a' .注意,此处的数字为计算机中的32位整数.这表示, 1个数字由四个字符组成(一个字符由8位二进制数组成). ...
- SQL语言 持续更新中……
SQL提供了很多的聚集函数 COUNT([DISTINCT\ALL]*) SUM([DISTINCT\ALL]<列名>)AVG().…… WHERE 子句中是不能用聚集函数作为条件表达式 ...
- 网页游戏开发秘笈 PDF扫描版
精选10种常见的游戏类型,透过典型实例,深入剖析游戏引擎及工具的选用技巧,详细讲解每款游戏的制作过程,为快速掌握网页游戏开发提供系统而实用的指南. 网页游戏开发秘笈 目录: 译者序 前 言 导 言 ...
- GoWeb开发_Iris框架讲解（二）：Get、Post、Put等请求及数据返回格式
数据请求方式的分类 所有的项目中使用的请求都遵循HTTP协议标准,HTTP协议经过了1.0和1.1两个版本的发展. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP ...