Bootstrap实战

原创 2016年08月30日 10:55:02

Bootstrap在线编辑工具(http://www.layoutit.com)

Bootstrap中文网(http://www.bootcss.com/)

bootstrap-responsive.css必须放置于bootstrap.css后面,否则不具有响应式布局功能。


bootstrap栅格系统

分两种:固定式(fix),流式(fluid)

固定式栅格系统每列宽度与列间间距是固定的,列宽为60px,列间距为20px。

容器为.row,可在容器中加入合适数量的.span*列,在设计页面网格系统时,若确定宽度为940像素,则应确保各列之和等于12。

把列向右移动可使用.offset*类,每个类都给列的左边距增加了指定单位的列。



网页宽度默认等于屏幕宽度,原始缩放比例为1.0

      <meta name="viewpoint" content="width=device-width;initial-scale=1.0">

响应式布局网页字体大小不能用绝对大小(px),而只能用相对大小(em)



优化css样式

文本强调风格:<b>侧重于表现视觉上的强调,<strong>指语义上的强调。<small>标签将缩小文本大小到85%。<em>斜体强调效果


<p class="muted">提示,浅灰色</p>
<p class="text-warning">警告类文本</p>
<p class="text-error">错误类文本</p>
<p class="text-info">通知类文本</p>
<p class="text-success">成功类文本</p>

<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中对齐</p>

  <p><abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是英语层叠样式表单
    </p> <span style="white-space:pre">		</span>//对<abbr>标签增强样式,initialism字体大小缩小10%,设置字母全部大写
<pre name="code" class="html"><address>
  	<a href="mailto:cxh@163.com">小灰灰邮箱</a>			//定义地址
  </address>


<blockquote cite="http://www.w3school.com.cn">
 	<p>引用文字</p>				//定义摘自另一个源的块引用,里面所有的文本都会从常规文本中分离,在左右两边缩进,有时用斜体。
 </blockquote>
<dl>……</dl>:标识定义列表
 <dt>……</dt>:标识词条
 <dd>……</dd>:标识解释
 <dl class="dl-horizontal"><span style="white-space:pre">		</span>//horizontal可以让解释与词条并列显示
 	<dt>
 		知无不言,言无不尽
 	</dt>
 	<dd>
 		知道的就说,要说就毫无保留
 	</dd>
 </dl>
<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容
<pre>标签可定义预格式化的文本

<table><span style="white-space:pre">		</span>//border-collapse:collapse声明,定义表格单线显示;border-spacing:0声明,清除表格内边距;max-width:100%声明,定义表格100%宽度显示
	<caption>……</caption>
	<thead>
		<tr>
			<th>……</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>……</td>
		</tr>
	</tbody>
</table>
<span style="white-space:pre">	</span><table class="table table-striped"></table>		//斑马纹样式
	<table class="table table-striped table-bordered"></table>	//圆角边框风格
	<table class="table table-striped table-bordered table-hover"></table>//鼠标悬停风格
	<table class="table table-condensed"></table>		//紧凑单元格风格
<table class="table table-bordered table-hover">
		<tr><th>样式表</th><th>说明</th></tr>
		<tr class="success"><td>success</td>表示成功或积极的行为</tr>
		<tr class="error"><td>error</td>表示一个危险或存在危险的行为</tr>
		<tr class="warning"><td>warning</td>表示警告,可能需要注意</tr>
		<tr class="info"><td>info</td>作为默认样式的一个替代样式</tr>
	</table>
<span style="white-space:pre">	</span><input type="text" placeholder="文本框默认值">
	<textarea rows="3"></textarea>		//多行文本域
<label class="checkbox inline">
		<input type="checkbox" value="">复选框<span style="white-space:pre">				</span>//复选框或单选按钮引用inline类,使他们排列在同一行
	</label>
	<label class="radio inline">
		<input type="radio" name="" id="" value="" checked="">男
	</label>
<select name="选择城市">
		<optgroup label="山东省">
			<option value="潍坊">潍坊</option>
			<option value="青岛" selected="selected">青岛</option><span style="white-space:pre">			</span>//<optgroup>标签对<option>标签进行分组
		</optgroup>
		<optgroup label="山西省">
			<option value="太原">太原</option>
			<option value="榆次">榆次</option>
		</optgroup>
	</select>
//add-on类和input组合设计,可在文本输入框之前或之后添加文本或按钮
	<div class="input-prepend">
		<span class="add-on">Email</span>
		<input class="span2" id="" type="text" placeholder="">
	</div>
	<div class="input-append">
		<input class="span2" id="" type="text">
		<span class="add-on">.00</span>
	</div>
	<div class="input-prepend input-append" >
		<span class="add-on">Email</span>
		<input class="span2" id="" type="text" placeholder="">
		<span class="add-on">@163.com</span>
	</div>
//按钮文本框
	<div class="input-prepend input-append">
		<input type="button" class="btn" value="用户名"/>
		<input type="text"/>
		<button class="btn">注册</button>
	</div>
<div class="input-prepend input-append">
		<input type="button" class="btn" value="Email"/>
		<input type="text"/>
		<div class="btn-group">		//btn-group定义按钮组
		<button class="btn" data-toggle="dropdown">@163.com	</button>//dropdown-menu定义下拉菜单
		<ul class="dropdown-menu">
			<li><a href="#">@126.com</a></li>
			<li><a href="#">@sohu.com</a></li>
			<li><a href="#">@qq.com</a></li>
		</ul>
		</div>
		<button class="btn">登录</button>
	</div>
//分段按钮下拉菜单
	<div class="input-prepend input-append">
		<input type="button" class="btn" value="Email"/>
		<input type="text"/>
		<div class="btn-group">		//btn-group定义按钮组
		<button class="btn">@163.com</button>//dropdown-menu定义下拉菜单
		<button class="btn" data-toggle="dropdown" tabindex="-1">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">@126.com</a></li>
			<li><a href="#">@sohu.com</a></li>
			<li><a href="#">@qq.com</a></li>
		</ul>
		</div>
		<button class="btn">登录</button>
	</div>
//搜索框
	<form class="form-search"><span style="white-space:pre">		</span>//搜索框样式
		<div class="input-append"><span style="white-space:pre">	</span>//表单框
			<input type="text" class="span3">
			<button type="submit" class="btn">快速搜索</button>
		</div>
	</form>
//默认风格
	<form method="post" action="">
		<label for="username">用户名</label><span style="white-space:pre">		</span>//行内布局form-inline
		<input type="text" id=""/>
		<label for="userPsw">密码</label>
		<input type="password" id=""/>
	</form>
	//圆角搜索框
	<form class="form-search">
		<input type="text" class="search-query">	//圆角样式
	</form>
//水平布局
	<form method="post" action="" class="form-horizontal"> 
		<div class="control-group">
			<div class="control-label">
				<label for="username">用户名</label>
			</div>
			<div class="controls">
				<input type="text" id="userName"/>
			</div>
		</div>
		<div class="control-group">
			<div class="control-label">
				<label for="userPsw">密码</label>
			</div>
			<div class="controls">
				<input type="password" id="userPsw"/>
			</div>
		</div>
	</form>
//若想让每行显示多个文本框,可使用controls-row类为输入框增加合适的间距
	<div class="controls-row">
		<input class="span1" type="text" placeholder=".span1">
		<input class="span6" type="text" placeholder=".span6">
	</div>
//定制不可编辑的样式控件uneditable-input
	<input class="span4 uneditable-input" disabled type="text" placeholder="">
	<span class="span4 uneditable-input"></span>
	//定制帮助文本
	<input type="text"><span class="help-inline">行内解释文本</span>
	<input type="text"><span class="help-block">块解释文本</span>
	//form-actions控制表单整体样式
	<form class="form-actions">
		<label>
			用户名:
			<input type="text" id=""/>
		</label>
		<label>
			密码:
			<input type="password" id=""/>
		</label>
		<button type="button" class="btn">取消</button>
		<button type="submit" class="btn btn-primary">确定登陆</button>
	</form>
无效状态
	invalid样式,为它指定type和required属性就可以激活无效状态,用户也可以配合pattern属性,设置输入模式
	<input class="span3" type="email" required>
//定制风格
	<button class="btn">默认</button>
	<button class="btn btn-info">信息</button>
	<button class="btn btn-primary">主要</button>
	<button class="btn btn-success">成功</button>
	<button class="btn btn-warning">警告</button>
	<button class="btn btn-danger">危险</button>
	<button class="btn btn-inverse">反向</button>
	<button class="btn btn-link">链接</button>
	<button class="btn btn-info btn-large">大号按钮</button>
	<button class="btn btn-info">默认大小</button>
	<button class="btn btn-info btn-small">小号按钮</button>
	<button class="btn btn-info btn-mini">迷你按钮</button>
	<button class="btn btn-info btn-large btn-block">文字</button>
	<button type="button" class="btn btn-large" disabled="disabled">属性禁用</button>
<div class="text-center span3"><img src="">
		<h3>正常效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-rounded">
		<h3>圆角效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-circle">
		<h3>圆形效果</h3>
	</div>
	<div class="text-center span3"><img src="" class="img-polaroid">
		<h3>镶边效果</h3>
	</div>
//按钮图片
	<div class="btn-toolbar">
		<div class="btn-group">
			<a class="btn" href="#"><i class="icon-play"></i></a>
			<a class="btn" href="#"><i class="icon-pause"></i></a>
			<a class="btn" href="#"><i class="icon-stop"></i></a>
			<a class="btn" href="#"><i class="icon-backward"></i></a>
			<a class="btn" href="#"><i class="icon-forward"></i></a>
		</div>
	</div>
<ul class="nav nav-pills">
		<li class="active"><a href="#"><i class="icon-home icon-white"></i>首页</a></li>
		<li><a href="#"><i class="icon-book"></i>资料</a></li>
		<li><a href="#"><i class="icon-pencil"></i>写日志</a></li>
		<li><a href="#"><i class="icon-film"></i>视频</a></li>
	</ul>
//设计多级下拉菜单
	<div class="dropdown"><a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
设置下拉菜单选项dropdown-menu容器中添加pull-right类实现右对齐
	<div class="dropdown">
		<a href="#" data-toggle="dropdown">文本文字</a>
		<ul class="dropdown-menu pull-right">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li><a href="#">菜单项3</a></li>
		</ul>
	</div>
//设计菜单分割线
	<div class="dropdown">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="divider"></li>
			<li><a href="#">菜单项3</a></li>
		</ul>
	</div>
//向上弹出菜单
	<div class="dropup">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
	//向左弹出菜单
	<div class="dropup">
		<a href="#" data-toggle="dropdown">激活元素</a>
		<ul class="dropdown-menu">
			<li><a href="#">菜单项1</a></li>
			<li><a href="#">菜单项2</a></li>
			<li class="dropdown-submenu pull-left"><a href="#">菜单项3</a>
				<ul class="dropdown-menu">
					<li><a href="#">菜单项3-1</a></li>
					<li><a href="#">菜单项3-2</a></li>
					<li><a href="#">菜单项3-3</a></li>
				</ul>
			</li>
		</ul>
	</div>
//设计按钮组
<div class="btn-group">
	<p class="btn">按钮</p>
	<li class="btn"></li>
	<a class="btn"></a>
	<span class="btn"></span>
</div>
//按钮导航条
<div class="btn-toolbar text-center">
	<div class="btn-group">
		<i class="btn"><i class="icon-step-backward"></i></i>
		<i class="btn"><i class="icon-backward"></i></i>
	</div>
	<div class="btn-group">
		<i class="btn">1</i>
		<i class="btn">2</i>
		<i class="btn">3</i>
		<i class="btn">4</i>
	</div>
	<div class="btn-group">
		<i class="btn"><i class="icon-forward"></i></i>
		<i class="btn"><i class="icon-step-forward"></i></i>
	</div>
</div>
 //设计垂直按钮组
<div class="btn-group-vertical">
	<p class="btn">按钮</p>
	<li class="btn"></li>
	<a class="btn"></a>
	<span class="btn"></span>
</div>
 //设计导航组件
   <ul class="nav">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
   //设计标签页
   <ul class="nav nav-tabs pull-right">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
   //设计pills导航
   <ul class="nav nav-pills">
   	<li class="active"><a href="#">首页</a></li>
   	<li><a href="#">导航标题1</a></li>
   	<li><a href="#">导航标题2</a></li>
   </ul>
 //堆叠式效果
  <ul class="nav nav-tabs nav-stacked">
  	<li class="active"><a href="#">首页</a></li>
  	<li><a href="#"></a></li>
  	<li><a href="#"></a></li>
  </ul>
//标签下拉菜单
 <ul class="nav nav-tabs">
 	<li class="active"><a href="">首页</a></li>
 	<li><a href="#">微课</a></li>
 	<li class="dropdown"><a data-toggle="dropdown" href="#">微博<b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
			<li><a href="#">退出</a></li>
		</ul>
 	</li>
 </ul>
//激活标签页
 <div>
 	<ul class="nav nav-tabs">
 		<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
 		<li><a href="#tab2" data-toggle="tab">微课</a></li>
 		<li><a href="#tab3" data-toggle="tab">微博</a></li>
 	</ul>
 	<div class="tab-content">
 		<div class="tab-pane active" id="tab1">首页内容框</div>
 		<div class="tab-pane" id="tab2">微课内容框</div>
 		<div class="tab-pane" id="tab3">微博内容框</div>
 	</div>
 </div>
 //标签页淡入效果
 <div class="tabbable"><span style="white-space:pre">			</span>//tabs-below,tabs-left
 	<ul class="nav nav-tabs">
 		<li class="active"><a href="#tab1" data-toggle="tab">首页</a></li>
 		<li><a href="#tab2" data-toggle="tab">微课</a></li>
 		<li><a href="#tab3" data-toggle="tab">微博</a></li>
 	</ul>
 	<div class="tab-content">
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 		<div class="tab-pane active" id="tab1"><img src=""></div>
 	</div>
 </div>
//导航条包含框
 <div class="navbar">
 	<div class="navbar-inner"></div>
 </div>
//导航条分割线效果
 <div class="navbar">
 	<div class="navbar-inner">
 		<a class="brand" href="#">网站名称</a>
 		<ul class="nav">
 			<li class="active"><a href="#">首页</a></li>
 			<li class="divider-vertical"></li>
 			<li><a href="#">导航标题1</a></li>
 			<li class="divider-vertical"></li>
 			<li><a href="#">导航标题2</a></li>
 		</ul>
 	</div>
 </div>
//设计表单导航条
 <div class="navbar">
 	<div class="navbar-inner">
 		<form class="navbar-form pull-left">
 			<input type="text" class="span3">
 			<input type="text" class="btn span1" value="提交"/>
 		</form>
 	</div>
 </div>
//设计表单导航条
 <div class="navbar">
 	<div class="navbar-inner">
 		<form class="navbar-search form-search pull-left">
 			<div class="input-append">
 				<input type="text" class="search-query span3">
 				<input type="text" class="btn span1" value="提交"/>
 			</div>
 		</form>
 	</div>
 </div>
//设计导航条反色效果
 		<div class="navbar navbar-inverse">
 			<div class="navbar-inner">
 				<a class="brand" href="#">导航条</a>
 				<form class="navbar-search form-search pull-left">
 					<div class="input-append">
 						<input type="text" class="search-query span3">
 						<input type="text" class="btn span1" value="搜索"/>
 					</div>
 				</form>
 			</div>
 		</div>
响应式导航条
 		<div class="navbar">
 			<div class="navbar-inner">
 				<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
 				</a>
 				<a class="brand" href="#">响应式导航条</a>
 				<ul class="nav nav-collapse collapse navbar-responsive-collapse">
 					<li class="active"><a href="#">首页</a></li>
 					<li><a href="#"></a></li>
 					<li><a href="#"></a></li>
 				</ul>
 			</div>
 		</div>
	//面包屑
 		<ul class="breadcrumb">
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li>
 				<a href="#">首页</a><span class="divider">---></span>
 			</li>
 			<li class="active">新闻详细页</li>
 		</ul>
 		//设计分页
 		<div class="Pagination">
 			<ul>
 				<li><a href="">Pre</a></li>
 				<li><a href="">1</a></li>
 				<li><a href="">2</a></li>
 				<li><a href="">3</a></li>
 				<li><a href="">4</a></li>
 				<li><a href="">Next</a></li>
 			</ul>
 		</div>
 	<div class="pagination pagination-large"></div>
 	<div class="pagination pagination-large pagination-centered"></div>
 	<div class="pagination pagination-large pagination-right"></div>
 	//翻页组件
 	<ul class="paper">
 		<li class="previous"><a href="#">上一页</a></li>	//class="previous disabled"
 		<li class="next"><a href="#">下一页</a></li>
 	</ul>
	<span class="label label-info">信息</span>
   	<span class="label label-important">重要</span>
   	<span class="label label-success">成功</span>
   	<span class="label label-warning">警告</span>
   	<span class="label label-inverse">反向</span>
   	<span class="badge">默认</span>
   <span class="badge badge-info">信息</span>
   	<span class="badge badge-important">重要</span>
   	<span class="badge badge-success">成功</span>
   	<span class="badge badge-warning">警告</span>
   	<span class="badge badge-inverse">反向</span>
 //缩略图
   <ul class="thumbnails">
   	<li class="span1">
   		<a href="#" class="thumbnail"><img src=""></a>
   	</li>
   </ul>
 //警告框
  <div class="alert alert-danger">
  	<button type="button" class="close" data-dismiss="alert">×</button>
  </div>
//alert-error;alert-success;alert-info
//进度条
 <div class="progress">
 	<div class="bar" style="width:50%"></div>
 </div>
  <div class="progress progress-striped">
 	<div class="bar" style="width:50%"></div>
 </div>
 <div class="progress progress-info">	//success,warning,danger
 	<div class="bar" style="width:50%"></div>
 </div>
//版式
 <div class="hero-unit"></div>
 


















































版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

bootstrap实战-起步案例的再编写

实战

Bootstrap实战--轮播图

搭建进度指示器 <li data-target="#homepage-feature" data-slide-t

最好懂的 Bootstrap 实战案例教程

我们每期会根据不用的项目案例安排不同的技术栈免费课程!免费!免费!免费!来帮助大家提高,有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候,如果每一个按钮、样...

[Bootstrap]从入门到实战_客户案例详情页开发(三)

$客户案例详情页(case.html)新建一个文件case.html,客户案例详情页实际上和平时常见的 “新闻内容页”、“产品介绍页”非常类似,我们这里先做个简化版。最终效果如下: $case.ht...

bootstrap商业网站实战

bootstrap商业网站实战 教程(视频,课件,源码)索取QQ:1225462853 Bootstrap Web前端CSS框架开发视频教程合集 Bootstrap视频教程 Boot...

Bootstrap项目实战——架构视角介绍使用

微金所项目实战1. 搭建Bootstrap页面骨架及项目目录结构├─ /xxxxxxx/ ·················...

jfinal与bootstrap的登出实战

前言:本篇推出“jfinal与bootstrap的登出实战”,旨在介绍如果通过a标签弹出登出确认框,然后发送退出请求到jfinal,然后再刷新页面的做法。主要难点在于1.如果通过a标签的内容弹出登出确...

PHP实战 新闻管理系统 使用到了bootstrap框架

PHP实战 新闻管理系统 其中也使用到了bootstrap框架

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景

CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开。
  • kgsew
  • kgsew
  • 2014-12-01 11:31
  • 1239
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)