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 ...
随机推荐
- centos 7之文件共享
一,安装过程 1.在VirtualBox的软件菜单里面选择 “设备”--“存储”,添加VBoxGuestAdditions.iso(在VirtualBox目录下). 2.在桌面上出现一个光驱 ...
- C语言连接mysql -insert-update
C语言连接mysql数据库实现insert语句:数据库:test表:systeminfo CREATE TABLE `systeminfo` ( `id` int(11) NOT NULL AUTO ...
- C++中const型数据的小结
由于与对象又管的const型数据种类较多,形式又有些相似,往往难记,容易混淆,因此总结一下相关用法,具体用法可查看下方链接 C++中对象的常引用 C++中指向对象的常指针和指向常对象的指针 C++中的 ...
- R: matrix & array 生成、操作矩阵、数组：
################################################### 问题:生成.操作矩阵 18.4.27 怎么生成矩阵 matrix.,,及其相关操作 ??? ...
- svn的revert、checkout、clean up、setting
svn revert 描述恢复所有对文件和目录的修改,并且解决所有的冲突状态. svn revert不会只是恢复工作拷贝中一个项目的内容,也包括了对属性修改的恢复.最终,你可以使用它来取消所有已经做过 ...
- ascII、iso、utf-8、Unicode的区别
utf-8和Unicode到底有什么区别?是存储方式不同?编码方式不同?它们看起来似乎很相似,但是实际上他们并不是同一个层次的概念,utf-8是unicode的实现方式. 要想先讲清楚他们的区别,首先 ...
- vue打包之后生成一个配置文件修改请求接口
问题描述: 在npm run build 生成dist后,url配置也被固定了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要回到前端源码,修改ur ...
- 2017BAPC初赛A（思维，无序图，向量）
#include<bits/stdc++.h>using namespace std;string goods,sister[100010];int x,m;unordered_map&l ...
- go语言web开发框架_Iris框架讲解（六）：Session的使用和控制
在实际的项目开发中,我们会经常有业务场景使用到Session功能.在iris框架中,也为我们提供了方便使用,功能齐全的Session模块.Session模块的源码目录为kataras/iris/ses ...
- 2017-10-7 清北刷题冲刺班p.m
测试 A 同花顺 文件名 输入文件 输出文件 时间限制 空间限制card.cpp/c/pas card.in card.out 1s 512MB题目描述所谓同花顺,就是指一些扑克牌,它们花色相同,并且 ...