bootstrap:
打开网页: https://v2.bootcss.com/getting-started.html 或 其它网站
点击下载bootstrap, 即可得到bootstrap.zip文件, 解压后的目录结构如下:
所有的JavaScript插件都依赖jquery库, 所以在使用bootsrap之前时需要先导入jquery
导入bootstrap和jquery, 构成基本的bootstrap页面(bootstrap.css, jquery.js, bootstrap.js):
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 导入bootstrap.css(注意这个rel属性是必须的) -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 导入jquery.js -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- 导入bootstrap.js -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>Bootstrap使用时, 文档类型需为 HTML5(<!DOCTYPE html>), 否则可能会有一些问题
Bootstrap 为屏幕、排版和链接设置了基本的全局样式:
- 移除了body的
margin - 设置了
body的背景颜色background-color: white; - 使用
@baseFontFamily、@baseFontSize和@baseLineHeight属性作为我们排版的基础 - 通过
@linkColor设置全局链接颜色，并且，当链接处于:hover状态时才会带有下划线
meta标签设置:
Bootstrap3的设计目标是移动设备优先
为了让 Bootstrap 开发的网站对移动设备更友好，需要在网页的 head 之中添加 viewport meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">device-width 可以确保它能正确呈现在不同设备上
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放
添加 user-scalable=no 可以禁用其缩放功能
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用:
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">网格系统:
随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
- 使用 .container 创建的容器，以便获得适当的对齐（alignment）和 内边距（padding）
- 使用.row创建的水平组, 在水平组中可放置多个列.col-xs-*
- 因此使用 .container --> .row --> .col-xs-* 用于快速创建网格布局
使用网格系统
<body>
<div class="container">
<div class="row" >
<div class="col-xs-3" style="background-color: #F00">
<p>11111111111</p>
</div>
<div class="col-xs-3" style="background-color: #0F0">
<p>11111111111</p>
<p>11111111111</p>
</div>
<div class="col-xs-3" style="background-color: #00F">
<p>11111111111</p>
</div>
<div class="col-xs-3" style="background-color: #dedef8">
<p>11111111111</p>
</div>
</div>
</div>col-xs-* 手机(<768px), 一直是水平不折叠
col-ms-* 平板电脑(>=768px), 以折叠开始，断点以上是水平的
col-md-* 中型电脑(>=992px), 以折叠开始，断点以上是水平的
col-lg-* 大型台式(>=1200px), 以折叠开始，断点以上是水平的
即他们开始折叠的的屏幕大小不一样
偏移: 使用offset表示偏移多少个网格, 它相对于自己本身的原来位置偏移
class="col-md-6 col-md-offset-3".col-md-push-* 和 .col-md-pull-* 一个表示前进一个表示后退
嵌套行和列
首先是.container, 然后在里面是.row, .row里面是.col-md-*
而在.col-md-*里面还可以添加.row, 这就是行列嵌套
标签默认样式:
bootstrap对html大部份元素的默认样式做了修改, 它的表现比默认html元素好看, 这省略掉很多样式的基本设置
比如<small>: 比默认html的small标签颜色更浅字体更小(显然这比默认样式好看)
比如<abbr>: 会带有问号标识, 且样式更好看
比如<blockquote>: 里面放置一个<small>则会添加一个短横线, 表示引用
一些文本样式:
.lead 使段落突出显示
.small 设定小文本 (设置为父文本的 85% 大小)
.text-left 设定文本左对齐
.text-center 设定文本居中对齐
.text-right 设定文本右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.blockquote-reverse 设定引用右对齐
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
.dl-horizontal 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例
.pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 直接使用就行了, 它就会带bootstrap赋予的样式:
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>表格:
bootstrap的表格, 只需要添加table样式即可以得到不错的一个表格展示
bootstrap也给出了表单元素的基本样式
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>给行或列添加背景色:
<tr class="active">
<td>产品1</td>
<td>23/11/2013</td>
<td class='info'>待发货</td>
</tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td>
</tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td>
</tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td>
</tr>精简表格: 加上这个样式table-condensed
<table class="table table-condensed">
鼠标悬停: 加上table-hover样式
<table class="table table-hover">
响应式表格: 加上table-responsive样式
<table class="table table-responsive">
边框表格: 加上table-bordered样式
<table class="table table-bordered">
条纹表格: 加上table-striped样式
<table class="table table-striped">
表单:
创建基本表单的基本步骤:
- 向form元素添加属性role="form"
- 把标签和控件放在<div class="form-group">...</div>中
- 对表单元素添加 class ="form-control" 可以改变其展示样式
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>内联表单 <form class="form-inline" role="form">
水平表单 <form class="form-horizontal" role="form"> 水平表单可能用更多
默认情况下一个form-group中的内容排列在一行
注: col-sm-* form-control一起使用的话, col-sm-*不能起作用
比如: <input class='col-sm-6 form-control'>
可以换成两个标签分别样式 : <div class='col-sm-6'> <input class='form-control'/> </div>
input标签
<form role="form">
<div class="form-group">
<label for="name">标签</label>
<input type="text" class="form-control" placeholder="文本输入">
</div>
</form>Textarea标签
<form role="form">
<div class="form-group">
<label for="name">文本框</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>复选框Checkbox 和 单选框Radio
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上
<div class="checkbox">
<div class="radio">
<label class="checkbox-inline">
<label class="radio-inline">
选择框Select
<form role="form">
<div class="form-group">
<label for="name">下拉列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="name">按住ctrl键可多选的选择列表</label>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
<option>5</option>
</select>
</div>
</form>在一个水平表单内的表单标签后放置纯文本时使用 class .form-control-static
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>设置表单的宽高
使用 input-lg 和 网格占比 来设置表单的高度和宽度
<select class="form-control input-lg"> 大
<input class="form-control input-sm" type="text"> 小
<div class="col-sm-1"> 占1/12份
禁用控件
<input class="form-control" type="text" placeholder="禁止输入..." disabled>
禁用多个
<fieldset disabled>
<div class="form-group"> ...</div>
<div class="form-group">...</div>
</fieldset>
Bootstrap 包含了错误、警告和成功消息的验证样式
<div class="form-group has-success">
<div class="form-group has-warning">
<div class="form-group has-error">
bootstrap按钮:
class="btn" 带有圆角灰色按钮的外观, 可用于<a>, <button>, 或 <input> 元素上
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>| Class | 描述 |
|---|---|
| .btn-lg | 这会让按钮看起来比较大。 |
| .btn-sm | 这会让按钮看起来比较小。 |
| .btn-xs | 这会让按钮看起来特别小。 |
| .btn-block | 这会创建块级的按钮，会横跨父元素的全部宽度。 |
按钮组
将一组按钮放在一起, 中间没有间隙
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>统一设置按钮组的大小
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<h3>默认大小按钮:</h3>
<div class="btn-group">
...
</div>
<h3>小按钮:</h3>
<div class="btn-group btn-group-sm">
...
</div>
<h3>超级小按钮:</h3>
<div class="btn-group btn-group-xs">
...
</div>垂直按钮组
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>自适应大小按钮组
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>自适应按钮组, 如果是button, 则需要在button元素外加上 .btn-group 类来包裹
自适应按钮组, 一般就用a元素, 比button简单
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>内嵌按钮组
在一个按钮组(btn-group)中放置一个button, 再并列一个ul元素, 即它两个做为一个按钮组
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>分隔按钮组
在一个按钮组中有多个button, 在目标button后面加一个ul元素
和前面一内嵌按钮组的一点区别就是目标button中没有内容, 只有一个图标而已(span), 而上面有文字Sony
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>bootstrap对图片的样式
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">文本样式:
<p class="text-danger">该段落使用了的文本样式</p>
<p class="text-warning">该段落使用了的文本样式</p>
<p class="text-info">该段落使用了的文本样式</p>
<p class="text-success">该段落使用了的文本样式</p>
<p class="text-primary">该段落使用了的文本样式</p>
<p class="text-muted">该段落使用了的文本样式</p>背景样式:
<p class="bg-primary">该段落使用了类样式</p>
<p class="bg-success">该段落使用了类样式</p>
<p class="bg-info">该段落使用了类样式</p>
<p class="bg-warning">该段落使用了类样式</p>
<p class="bg-danger">该段落使用了类样式</p>其它样式:
使用pull-left 与pull-right左右浮动
产生浮动后, 浮动上去的元素会成为内联块元素(可设置高度等), 脱离文档流
浮动产生后, 必然要造成浮动塌陷, 影响元素布局
因为脱离文档流, 则包裹浮动元素的div就是空元素了, 即这个div没内容了 -- 塌陷
在这个div上加clearfix类样式, 即可清除浮动影响(效果就是再次撑开这个div, 其高度就是撑开的最大高度)
<body>
<div class="clearfix bg-warning">
<div class="pull-left bg-success" style="height:100px">
向左快速浮动(左浮动)
</div>
<div class="pull-right bg-info">
向右快速浮动(右浮动)
</div>
</div>
<div>其它元素, 放在浮动元素 .clearfix 外面</div>
</body>使用center-block直接把元素设置为块, 并居中
<span class="center-block bg-success" style="width:150px; height:100px">该 div 显示在中间</span>
使用class = hidden隐藏元素, 当然也支持html的hidden属性
<p class="hidden" hidden>该段落强制隐藏</p> --- hidden类样式与hidden属性都可以使用
使用caret显示下拉式功能, 可用放于一个按钮中
需要: 1.按钮中属性 data-toggle = 'dropdown', 2.类样式 class='dropdown-toggle'
3.ul中class类样式 class='dropdown-menu' , 4.而且还要在按钮组.btn-group里面
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">一个链接</a></li>
<li><a href="#">另一个链接 link</a></li>
<li><a href="#">其他功能</a></li>
</ul>
</div> 使用close样式可以设置成关闭图标的样式
<p class='close'>×</p>
<button type="button" class="close" aria-hidden="true">×</button>
使用 class='sr-only' 来把元素对所有设备隐藏，除了屏幕阅读器
<label class="sr-only" for="email">Email 地址</label>
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
