Bootstrap
来源:互联网 发布:流量充值平台源码 编辑:程序博客网 时间:2024/06/05 10:04
Bootstrap
优雅灵活可扩展前段工具
简单、灵活的用于搭建WEB页面的HTML,CSS,JavaScript的工具集
简洁强大的前端开发框架
让Web开发更迅速,更简单
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
标题<h1>到<h6>:h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。
副标题<small>:small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%
段落(正文文本)<p>
强调内容<p class="lead">
粗体<b>和<strong>
斜体<em>或<i>
强调相关的类
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
文本对齐风格
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
列表--简介
无序列表<ul> <li>…</li></ul>
有序列表<ol> <li>…</li></ol>
列表--去点列表 .list-unstyled
列表--内联列表 .list-inline 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示
列表--定义列表<dl> <dt>…</dt><dd>…</dd></dl>
列表--水平定义列表.dl-horizontal
代码
1、使用<code></code>来显示单行内联代码 一般是针对于单个单词或单个句子的代码
2、使用<pre></pre>来显示多行块代码 一般是针对于多行代码(也就是成块的代码)
3、使用<kbd></kbd>来显示用户输入代码 一般是表示用户要通过键盘输入的内容
.pre-scrollable <pre>元素控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
表格
.table:基础表格 <table class="table">
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格 <div class="table-responsive"> <table class="table table-bordered">
表格--表格行的类
表格的行元素<tr>五种不同的类名,每种类名控制了行的不同背景颜色
.active 表示当前活动的信息 <tr class="active">
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
表单
基础表单<form role="form">
水平表单form-horizontal <form class="form-horizontal" role="form">
内联表单form-inline <form class="form-inline" role="form"><div class="form-group">
表单控件(输入框input)<input type='text' class="form-control" placeholder="User name">
表单控件(下拉选择框select)<select class="form-control"> <select multiple class="form-control"> <option>1</option>
表单控件(文本域textarea)<textarea class="form-control" rows="3"></textarea>
表单控件(复选框checkbox和单选择按钮radio)<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢</label></div>
表单控件(复选框和单选按钮水平排列)<label class="checkbox-inline"> <label class="radio-inline">
表单控件(按钮) input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
表单控件大小 input-sm:让控件比正常大小更小 input-lg:让控件比正常大小更大
<div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div>
表单控件状态(焦点状态)form-control <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div>
表单控件状态(禁用状态)<input ... disabled> 禁用整个域<fieldset disabled> 取消禁用域中输入框的禁用<legend>
表单控件状态(验证状态) .has-warning:警告状态(黄色) .has-error:错误状态(红色) .has-success:成功状态(绿色)
表单对应状态显示icon has-feedback <div class="form-group has-success has-feedback">
必须在表单中添加一个span元素<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
表单提示信息help-block <span class="help-block">你输入的信息是正确的</span>
按钮
.btn 基本按钮<button class="btn" type="button">我是一个基本按钮</button>
.btn-default 默认按钮
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="#" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
定制风格
基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link
按钮大小
大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs
块状按钮btn-block
按钮状态——活动状态
悬浮状态(:hover)
点击状态(:active)
焦点状态(:focus)
按钮状态——禁用状态
方法1:在标签中添加disabled属性 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2:在元素标签中添加类名“disabled” <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
图像
img-responsive:响应式图片,主要针对于响应式设计
img-rounded:圆角图片
img-circle:圆形图片
img-thumbnail:缩略图片
图标<span class="glyphicon glyphicon-search"></span>
网格系统
实现原理:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
工作原理:
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响
基本用法:网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
Container width(Class prefix):None auto(.col-xs-) 750px(.col-sm-) 970px(.col-md-) 1170px(.col-lg-)
列偏移:col-md-offset-*
列排序:col-md-push-* col-md-pull-*
列的嵌套:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
</div>
</div>
下拉菜单
下拉菜单(下拉分隔线):<li role="presentation" class="divider"></li>
下拉菜单(菜单标题)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单(对齐方式):Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
下拉菜单(菜单项状态):悬浮状态(:hover),焦点状态(:focus),当前状态(.active),禁用状态(.disabled)
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
按钮(按钮组)
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-upload"></span></button>
</div>
按钮(按钮工具栏)
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
......
</div>
</div>
按钮(嵌套分组)<div class="btn-group">
按钮(垂直分组)<div class="btn-group-vertical">
按钮(等分按钮)<div class="btn-group btn-group-justified">
按钮下拉菜单
按钮的向下向上三角形<div class="btn-group dropup">
导航(基础样式)
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航(标签形tab导航)<ul class="nav nav-tabs">
导航(胶囊形(pills)导航)<ul class="nav nav-pills">
导航(垂直堆叠的导航)<ul class="nav nav-pills nav-stacked">
分隔线<li class="nav-divider"></li>
自适应导航<ul class="nav nav-tabs nav-justified">
面包屑式导航<ol class="breadcrumb">
导航条
为导航条添加标题、二级菜单及状态
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
带表单的导航条
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
导航条中的按钮、文本和链接: navbar-btn navbar-text navbar-link
固定导航条
navbar-fixed-top:导航条固定在浏览器窗口顶部
navbar-fixed-bottom:导航条固定在浏览器窗口底部
响应式导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><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>
反色导航条<div class="navbar navbar-inverse" role="navigation">
分页导航(带页码的分页导航)<ul class="pagination pagination-lg">
分页导航(翻页分页导航)<ul class="pager">
标签
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>
徽章<li><a href="#">Messages <span class="badge">3</span></a></li>
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
默认警示框
<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>
可关闭的警示框
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功!
</div>
警示框的链接
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
基本进度条
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
彩色进度条
<div class="progress-bar progress-bar-success" style="width:40%"></div>
<div class="progress-bar progress-bar-info" style="width:60%"></div>
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
条纹进度条
<div class="progress progress-striped">
动态条纹进度条
<div class="progress progress-striped active">
正常层叠进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
层叠条纹进度条
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
带Label的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列:十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
</div>
</div>
基础列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
带徽章的列表组
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面纱
</li>
带链接的列表组
<li class="list-group-item">
<a href="##">揭开CSS3的面纱</a>
</li>
自定义列表组
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">图解CSS3</h4>
<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中国</h4>
<p class="list-group-item-text">致力于为中国开发者提供最全面,最具影响力,最前沿的Sass相关技术与教程...</p>
</a>
</div>
组合列表项的状态
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
多彩列表组
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
基础面板
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>
带有头和尾的面板
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者:大漠</div>
</div>
彩色面板 panel-primary:重点蓝 panel-success:成功绿 panel-info:信息蓝 panel-warning:警告黄 panel-danger:危险红
<div class="panel panel-primary">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者:大漠</div>
</div>
面板中嵌套表格
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者:大漠</div>
</div>
导入JavaScript插件
一次性导入:
<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<script src="js/bootstrap.min.js"></script>
单独导入:
? 动画过渡(Transitions):对应的插件文件“transition.js”
? 模态弹窗(Modal):对应的插件文件“modal.js”
? 下拉菜单(Dropdown):对应的插件文件“dropdown.js”
? 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”
? 选项卡(Tab):对应的插件文件“tab.js”
? 提示框(Tooltips):对应的插件文件“tooltop.js”
? 弹出框(Popover):对应的插件文件“popover.js”
? 警告框(Alert):对应的插件文件“alert.js”
? 按钮(Buttons):对应的插件文件“button.js”
? 折叠/手风琴(Collapse):对应的插件文件“collapse.js”
? 图片轮播Carousel:对应的插件文件“carousel.js”
? 自动定位浮标Affix:对应的插件文件“affix.js”
动画过渡(Transitions)
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
优雅灵活可扩展前段工具
简单、灵活的用于搭建WEB页面的HTML,CSS,JavaScript的工具集
简洁强大的前端开发框架
让Web开发更迅速,更简单
如何开始使用Bootstrap
英文网站:http://getbootstrap.com/
中文网站:
http://www.bootcss.com/
http://v3.bootcss.com/
下载:http://v3.bootcss.com/getting-started/#download
CSS样式:http://v3.bootcss.com/css/
组件:http://v3.bootcss.com/components/
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
标题<h1>到<h6>:h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。
副标题<small>:small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%
段落(正文文本)<p>
强调内容<p class="lead">
粗体<b>和<strong>
斜体<em>或<i>
强调相关的类
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
文本对齐风格
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
列表--简介
无序列表<ul> <li>…</li></ul>
有序列表<ol> <li>…</li></ol>
列表--去点列表 .list-unstyled
列表--内联列表 .list-inline 把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示
列表--定义列表<dl> <dt>…</dt><dd>…</dd></dl>
列表--水平定义列表.dl-horizontal
代码
1、使用<code></code>来显示单行内联代码 一般是针对于单个单词或单个句子的代码
2、使用<pre></pre>来显示多行块代码 一般是针对于多行代码(也就是成块的代码)
3、使用<kbd></kbd>来显示用户输入代码 一般是表示用户要通过键盘输入的内容
.pre-scrollable <pre>元素控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
表格
.table:基础表格 <table class="table">
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格 <div class="table-responsive"> <table class="table table-bordered">
表格--表格行的类
表格的行元素<tr>五种不同的类名,每种类名控制了行的不同背景颜色
.active 表示当前活动的信息 <tr class="active">
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div>
表单
基础表单<form role="form">
水平表单form-horizontal <form class="form-horizontal" role="form">
内联表单form-inline <form class="form-inline" role="form"><div class="form-group">
表单控件(输入框input)<input type='text' class="form-control" placeholder="User name">
表单控件(下拉选择框select)<select class="form-control"> <select multiple class="form-control"> <option>1</option>
表单控件(文本域textarea)<textarea class="form-control" rows="3"></textarea>
表单控件(复选框checkbox和单选择按钮radio)<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>喜欢</label></div>
表单控件(复选框和单选按钮水平排列)<label class="checkbox-inline"> <label class="radio-inline">
表单控件(按钮) input[type=“submit”] input[type=“button”] input[type=“reset”] <button>
表单控件大小 input-sm:让控件比正常大小更小 input-lg:让控件比正常大小更大
<div class="col-xs-4"> <input class="form-control input-lg" type="text" placeholder=".col-xs-4"> </div>
表单控件状态(焦点状态)form-control <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果"> </div>
表单控件状态(禁用状态)<input ... disabled> 禁用整个域<fieldset disabled> 取消禁用域中输入框的禁用<legend>
表单控件状态(验证状态) .has-warning:警告状态(黄色) .has-error:错误状态(红色) .has-success:成功状态(绿色)
表单对应状态显示icon has-feedback <div class="form-group has-success has-feedback">
必须在表单中添加一个span元素<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
表单提示信息help-block <span class="help-block">你输入的信息是正确的</span>
按钮
.btn 基本按钮<button class="btn" type="button">我是一个基本按钮</button>
.btn-default 默认按钮
多标签支持
<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="#" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>
定制风格
基础按钮.btn
默认按钮.btn-default
主要按钮.btn-primary
成功按钮.btn-success
信息按钮.btn-info
警告按钮.btn-warning
危险按钮.btn-danger
链接按钮.btn-link
按钮大小
大型按钮.btn-lg
正常按钮
小型按钮.btn-sm
超小型按钮.btn-xs
块状按钮btn-block
按钮状态——活动状态
悬浮状态(:hover)
点击状态(:active)
焦点状态(:focus)
按钮状态——禁用状态
方法1:在标签中添加disabled属性 <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
方法2:在元素标签中添加类名“disabled” <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
图像
img-responsive:响应式图片,主要针对于响应式设计
img-rounded:圆角图片
img-circle:圆形图片
img-thumbnail:缩略图片
图标<span class="glyphicon glyphicon-search"></span>
网格系统
实现原理:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
工作原理:
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响
基本用法:网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
Container width(Class prefix):None auto(.col-xs-) 750px(.col-sm-) 970px(.col-md-) 1170px(.col-lg-)
列偏移:col-md-offset-*
列排序:col-md-push-* col-md-pull-*
列的嵌套:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
</div>
</div>
下拉菜单
下拉菜单(下拉分隔线):<li role="presentation" class="divider"></li>
下拉菜单(菜单标题)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单(对齐方式):Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
下拉菜单(菜单项状态):悬浮状态(:hover),焦点状态(:focus),当前状态(.active),禁用状态(.disabled)
<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
按钮(按钮组)
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-zoom-in"></span></button>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-download"></span></button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-upload"></span></button>
</div>
按钮(按钮工具栏)
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
......
</div>
</div>
按钮(嵌套分组)<div class="btn-group">
按钮(垂直分组)<div class="btn-group-vertical">
按钮(等分按钮)<div class="btn-group btn-group-justified">
按钮下拉菜单
按钮的向下向上三角形<div class="btn-group dropup">
导航(基础样式)
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航(标签形tab导航)<ul class="nav nav-tabs">
导航(胶囊形(pills)导航)<ul class="nav nav-pills">
导航(垂直堆叠的导航)<ul class="nav nav-pills nav-stacked">
分隔线<li class="nav-divider"></li>
自适应导航<ul class="nav nav-tabs nav-justified">
面包屑式导航<ol class="breadcrumb">
导航条
为导航条添加标题、二级菜单及状态
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
带表单的导航条
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
导航条中的按钮、文本和链接: navbar-btn navbar-text navbar-link
固定导航条
navbar-fixed-top:导航条固定在浏览器窗口顶部
navbar-fixed-bottom:导航条固定在浏览器窗口底部
响应式导航条
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">慕课网</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><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>
反色导航条<div class="navbar navbar-inverse" role="navigation">
分页导航(带页码的分页导航)<ul class="pagination pagination-lg">
分页导航(翻页分页导航)<ul class="pager">
标签
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>
徽章<li><a href="#">Messages <span class="badge">3</span></a></li>
缩略图
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" >
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img alt="100%x180" src="http://img.imooc.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;">
</a>
</div>
</div>
</div>
默认警示框
<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>
可关闭的警示框
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功!
</div>
警示框的链接
<div class="alert alert-success" role="alert">
<strong>Well done!</strong>
You successfully read
<a href="#" class="alert-link">this important alert message</a>
</div>
基本进度条
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
彩色进度条
<div class="progress-bar progress-bar-success" style="width:40%"></div>
<div class="progress-bar progress-bar-info" style="width:60%"></div>
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
条纹进度条
<div class="progress progress-striped">
动态条纹进度条
<div class="progress progress-striped active">
正常层叠进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:10%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
层叠条纹进度条
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
带Label的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
媒体对象
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">系列:十天精通CSS3</h4>
<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
</div>
</div>
基础列表组
<ul class="list-group">
<li class="list-group-item">揭开CSS3的面纱</li>
<li class="list-group-item">CSS3选择器</li>
<li class="list-group-item">CSS3边框</li>
<li class="list-group-item">CSS3背景</li>
<li class="list-group-item">CSS3文本</li>
</ul>
带徽章的列表组
<li class="list-group-item">
<span class="badge">13</span>揭开CSS3的面纱
</li>
带链接的列表组
<li class="list-group-item">
<a href="##">揭开CSS3的面纱</a>
</li>
自定义列表组
<div class="list-group">
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">图解CSS3</h4>
<p class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性...</p>
</a>
<a href="##" class="list-group-item">
<h4 class="list-group-item-heading">Sass中国</h4>
<p class="list-group-item-text">致力于为中国开发者提供最全面,最具影响力,最前沿的Sass相关技术与教程...</p>
</a>
</div>
组合列表项的状态
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a>
</div>
多彩列表组
<div class="list-group">
<a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
<a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
<a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
</div>
基础面板
<div class="panel panel-default">
<div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
</div>
带有头和尾的面板
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者:大漠</div>
</div>
彩色面板 panel-primary:重点蓝 panel-success:成功绿 panel-info:信息蓝 panel-warning:警告黄 panel-danger:危险红
<div class="panel panel-primary">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
<div class="panel-footer">作者:大漠</div>
</div>
面板中嵌套表格
<div class="panel panel-default">
<div class="panel-heading">图解CSS3</div>
<div class="panel-body">
<p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>我的书</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《图解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者:大漠</div>
</div>
导入JavaScript插件
一次性导入:
<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<script src="js/bootstrap.min.js"></script>
单独导入:
? 动画过渡(Transitions):对应的插件文件“transition.js”
? 模态弹窗(Modal):对应的插件文件“modal.js”
? 下拉菜单(Dropdown):对应的插件文件“dropdown.js”
? 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”
? 选项卡(Tab):对应的插件文件“tab.js”
? 提示框(Tooltips):对应的插件文件“tooltop.js”
? 弹出框(Popover):对应的插件文件“popover.js”
? 警告框(Alert):对应的插件文件“alert.js”
? 按钮(Buttons):对应的插件文件“button.js”
? 折叠/手风琴(Collapse):对应的插件文件“collapse.js”
? 图片轮播Carousel:对应的插件文件“carousel.js”
? 自动定位浮标Affix:对应的插件文件“affix.js”
动画过渡(Transitions)
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
参考:http://www.imooc.com/course/list?c=bootstrap
阅读全文
0 0
- Bootstrap
- BootStrap
- Bootstrap
- bootstrap
- Bootstrap
- bootstrap$
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- bootstrap
- bootstrap
- Bootstrap
- Bootstrap
- Bootstrap
- bootstrap
- xe10 自带DEMO集合
- 说说压力测试工具
- Intellij IDEA 快捷键整理(史上最全)
- 阿里云centos7 yum搭建PHP 环境
- capture、allegro使用笔记
- Bootstrap
- 移动开发cordova环境搭建
- rdd不能嵌套rdd
- 面--经3
- no accounts with itunes connect access问题排查解决
- 架包下载、架包maven支持
- 将sublime text 集成到鼠标右键菜单
- ramoops&pstore简要说明
- 小白git使用笔记