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

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

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按钮
JS组件Bootstrap按钮组与下拉按钮详解
Bootstrap按钮下拉菜单组件详解
Bootstrap按钮组件详解
详解Bootstrap按钮
Bootstrap 按钮
Bootstrap 按钮组
Bootstrap 按钮下拉菜单
Bootstrap 按钮(Button)插件
Bootstrap 按钮
Bootstrap 按钮
Bootstrap按钮组简单实现代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

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