Bootstrap模板分析:按钮篇

我们先从最常见也最易学的按钮开始,选用的是“docs->examples->theme”模板(主题模板),用浏览器打开可见:

bootstrap按钮

其实这张图已经告诉我们不同样式的按钮使用方法了,稍后就能看到。

用DW打开index.html,因为theme示例中包含了按钮、表格、缩略图、标签、角标等等的样式,所以代码还是挺长的,为了专注学习一下按钮的使用,我们只保留最核心的部分,精简为:

<!DOCTYPE html>
<html>
  <head> 
    <meta charset=utf-8>
    <title>Theme Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
  </head>

  <body role="document"> 
      <div class="page-header">
        <h1>Buttons</h1>
      </div>
      <p>
        <button type="button" class="btn btn-lg btn-default">Default</button>
        <button type="button" class="btn btn-lg btn-primary">Primary</button>
        <button type="button" class="btn btn-lg btn-success">Success</button>
        <button type="button" class="btn btn-lg btn-info">Info</button>
        <button type="button" class="btn btn-lg btn-warning">Warning</button>
        <button type="button" class="btn btn-lg btn-danger">Danger</button>
        <button type="button" class="btn btn-lg btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-sm btn-default">Default</button>
        <button type="button" class="btn btn-sm btn-primary">Primary</button>
        <button type="button" class="btn btn-sm btn-success">Success</button>
        <button type="button" class="btn btn-sm btn-info">Info</button>
        <button type="button" class="btn btn-sm btn-warning">Warning</button>
        <button type="button" class="btn btn-sm btn-danger">Danger</button>
        <button type="button" class="btn btn-sm btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-xs btn-default">Default</button>
        <button type="button" class="btn btn-xs btn-primary">Primary</button>
        <button type="button" class="btn btn-xs btn-success">Success</button>
        <button type="button" class="btn btn-xs btn-info">Info</button>
        <button type="button" class="btn btn-xs btn-warning">Warning</button>
        <button type="button" class="btn btn-xs btn-danger">Danger</button>
        <button type="button" class="btn btn-xs btn-link">Link</button>
      </p>   
  </body>
</html>

精简后效果如下:

bootstrap按钮

使用按钮样式,需要引用的样式表包括bootstrap.min.css和bootstrap-theme.min.css。我们来看其中一句:

<button type=”button” class=”btn btn-lg btn-default”>Default</button>

可见定义按钮样式,只需要将元素的class属性设置为”btn btn-lg btn-default”,其中btn指示为按钮;btn-lg(lg即large的缩写,即大的按钮,同理btn-sm,sm为small,即小按钮)指示按钮大小,不写为默认大小;btn-default指示应用场合(颜色)。列表如下:

class 用途 效果
btn 指示按钮
btn-lg 指示大小
btn-sm
btn-xs
btn-default  

 

 

指示用途

btn-primary
btn-success 绿
btn-info 浅蓝
btn-warning
btn-danger
btn-link 文字

举个实用的例子,放置一个链接到http://www.icoder.top/的蓝色中等大小按钮,在引入css文件后,在合适的位置添加如下代码即可:

<a class=”btn btn-primary” href=”http://www.icoder.top/”>实用的例子</a>

效果如下:

bootstrap按钮

下一节我们看一看Bootstrap中的表格样式有哪些。