Bootstrap基本css样式--按钮

小丑鱼0703

浏览: 502044 次
性别:
来自: 北京

最近访客更多访客>>

ekingdom

倚月紫凌

Janne

qq85609655

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Bootstrap

http://v2.bootcss.com/base-css.html#buttons
首先介绍下默认按钮：
任何赋予.btn类的页面元素都会显示按钮样式。不过，通常是用于更好的表现<a> 和 <button> 页面元素。http://v2.bootcss.com/base-css.html#buttons

也可以添加如下例子中封装好的样式：

<html>  
  <head>  
    <title>Bootstrap 101 Template</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <!-- Bootstrap -->  
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">  
  </head>  
  <body>   
    <script src="http://code.jquery.com/jquery.js"></script>  
    <script src="js/bootstrap.min.js"></script>  
    <p><!--添加.btn-large、.btn-small 或 .btn-mini即可改变按钮大小。-->
	  <button class="btn btn-large btn-primary" type="button">Large button</button>
	  <button class="btn btn-large" type="button">Large button</button>
	</p>
	<p>
	  <button class="btn btn-danger" type="button">Default button</button>
	  <button class="btn" type="button">Default button</button>
	</p>
	<p>
	  <button class="btn btn-small btn-info" type="button">Small button</button>
	  <button class="btn btn-small" type="button">Small button</button>
	</p>
	<p>
	  <button class="btn btn-mini btn-success btn-block" type="button">Mini button</button><!--添加.btn-block类，可使按钮变为块级元素，同时会填充整个父级元素。-->
	  <button class="btn btn-mini" type="button">Mini button</button>
	</p>
        <!--给<a>元素添加.disabled类,颜色淡出50%，让按钮看起来无法点击。只是为了美观，你必须自己写JavaScript代码来禁止链接的行为。-->
	<a href="#" class="btn btn-large disabled">disabled link</a>
	<!--给<button>添加disabled属性。-->
        <button type="button" class="btn btn-large" disabled="disabled">Button</button>
	<button type="button" class="btn btn-large" disabled>Button</button>
  </body>  
</html>