Bootstrap基本css样式--按钮

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

Bootstrap基本css样式--按钮_第1张图片

也可以添加如下例子中封装好的样式:
<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>   

Bootstrap基本css样式--按钮_第2张图片

我们如果想深入研究可以查看bootstrap.css中对应封装的css样式是如何实现的。

你可能感兴趣的:(bootstrap)