发布于 2016-01-04 19:36:01 | 170 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于<a>, <button>, 或 <input> 元素上:
 
描述
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮
首先看下不同颜色的按钮:
 
 
<html lang="en">
<head>
	<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="Keywords" content="关键词一,关键词二">
	<meta name="Description" content="网站描述内容">
	<meta name="Author" content="Yvette Lau">
	<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
	<title>BootstrapDemo</title>
	<!--css js 文件的引入-->
	<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
	<body style="padding: 20px;">
		<!-- 标准的按钮 -->
		<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>
	</body>
</html>

 
效果:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
 

按钮大小

 
鉴于head部分都是相同的,只列出Body的内容。
 
<body style="padding: 20px;width:500px;">
	<!-- 标准的按钮 -->
	<button type="button" class="btn btn-default">默认按钮</button>
	<button type="button" class="btn btn-lg btn-default">大的默认按钮</button>
	<br/><br/>
	<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
	<button type="button" class="btn btn-primary">原始按钮</button>
	<button type="button" class="btn btn-sm btn-primary">小的原始按钮</button>
	<br/><br/>
	<!-- 表示一个成功的或积极的动作 -->
	<button type="button" class="btn btn-success">成功按钮</button>
	<button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button>
	<br/><br/>
	<!-- 用于要弹出信息的按钮 -->
	<button type="button" class="btn btn-info">信息按钮</button><br/><br/>
	<button type="button" class="btn btn-block btn-info">块级信息按钮</button>
	
</body>

 
效果如下所示:
 

按钮状态

按钮分为active和disabled两种状态、
激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。
禁用状态:按钮颜色会变淡 50%,并失去渐变
 
看具体的例子:
<body style="padding: 20px;width:500px;">
	<!-- 标准的按钮 -->
	<button type="button" class="btn btn-default">默认按钮</button>
	<button type="button" class="btn btn-default active">激活的默认按钮</button>
	<br/><br/>
	<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
	<button type="button" class="btn btn-primary">原始按钮</button>
	<button type="button" class="btn btn-primary active">激活的原始按钮</button>
	<br/><br/>
	<!-- 表示一个成功的或积极的动作 -->
	<button type="button" class="btn btn-success">成功按钮</button>
	<button type="button" class="btn btn-success active">激活的成功按钮</button>
	<br/><br/>
	<!-- 用于要弹出信息的按钮 -->
	<button type="button" class="btn btn-info">信息按钮</button>
	<button type="button" class="btn btn-info active">激活的信息按钮</button>
	<br/><br/>

	<button type="button" class="btn btn-default">默认按钮</button>
	<button type="button" class="btn btn-default disabled">禁用的默认按钮</button>
	<br/><br/>
	<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
	<button type="button" class="btn btn-primary">原始按钮</button>
	<button type="button" class="btn btn-primary disabled">禁用的原始按钮</button>
	<br/><br/>
	<!-- 表示一个成功的或积极的动作 -->
	<button type="button" class="btn btn-success">成功按钮</button>
	<button type="button" class="btn btn-success disabled">禁用的成功按钮</button>
	<br/><br/>
	<!-- 用于要弹出信息的按钮 -->
	<button type="button" class="btn btn-info">信息按钮</button>
	<button type="button" class="btn btn-info disabled">禁用的信息按钮</button>
	
</body>
 

按钮标签

a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。
 
<body style="padding: 20px;">
	<a class="btn btn-default" href="#" role="button">超链接按钮</a>
	<button class="btn btn-default btn-primary" type="submit">button按钮</button>
	<input class="btn btn-default btn-success" type="button" value="input按钮">
	<input class="btn btn-default btn-info" type="submit" value="submit按钮">
</body>

 
 
 
 


相关阅读 :
Bootstrap按钮
Bootstrap 按钮
Bootstrap 按钮组
Bootstrap 按钮下拉菜单
Bootstrap 按钮(Button)插件
Bootstrap 按钮
Bootstrap 按钮
bootstrap实现button按钮组示例代码
15 个很棒的 Bootstrap UI 界面编辑器
20 款最棒的 jQuery Bootstrap 插件
20 个免费的 Bootstrap 模板
Bootstrap简介,及如何下载、使用
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2015 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务