Bootstrap模板分析：按钮篇

最新推荐文章于 2023-12-07 14:42:12 发布

洒满阳光的午后

最新推荐文章于 2023-12-07 14:42:12 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： bootstrap 前端开发前端框架

本文链接：https://blog.csdn.net/sinat_32582203/article/details/52278891

版权

web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们先从最常见也最易学的按钮开始，选用的是“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		文字