首页 >web前端 >Bootstrap教程 > 正文

bootstrap按钮的风格有哪些

原创2019-07-12 10:49:260997
phpstudy集成环境下载
使用class='btn' ,使用了btn这个class类名,bootstrap自动给给你加上按钮的样式;

btn-primary 、btn-danger 、btn-warning等,可以改变按钮的样式风格,可以按需要去使用这些class。

实例:(推荐学习:Bootstrap视频教程

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 3 默认按钮</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="../bootstrap/v3/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<style>
		body {
			padding: 50px
		}
	</style>
	<!-- HTML5 Shim and Respond。js IE8支持 HTML5 原始和媒体查询。 -->
	<!-- WARNING: Respond。如果通过file://查看页面js将不工作。 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	
<!-- 标准按钮 -->
<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>
<!-- jQuery (对Bootstrap的 JavaScript插件来说是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件(如下),或者根据需要包括单个文件 -->
<script src="bootstrap/v3/dist/js/bootstrap.min.js"></script>
	
</body>
</html>

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

以上就是bootstrap按钮的风格有哪些的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:bootstrapt
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • Bootstrap3参考手册Bootstrap3参考手册
  • 黑马程序员bootstrap视频教程黑马程序员bootstrap视频教程
  • 9天学会html+css+bootstrap视频教程9天学会html+css+bootstrap视频教程
  • 快速入手BootStrap视频教程快速入手BootStrap视频教程
  • 视频教程分类