1. bootstrap按钮

    • 对应链接：http://v3.bootcss.com/css/#buttons
    • 使用时添加基础类class:btn
    • 默认样式class=btn-default，控制大小class=btn-(lg | sm | xs)，没有btn-md，默认即为中等大小
    • 一些简单的demo以及demo效果如下所示
    • <!DOCTYPE HTML>
      
<html>
      
    <head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
        <title>无标题文档</title>
      
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="css/bootstrap.css">
      
        <style>
      
            .glyphicon-heart {font-size: 100px; color: red;}
      
        </style>
      
    </head>
      
<body>

<div class="container">
      
    <input type="button" value="按钮" class="btn" />
      
    <input type="button" value="按钮" class="btn btn-default" />
      
    <input type="button" value="按钮" class="btn btn-link" />

    <br>
      
    <input type="button" value="按钮" class="btn btn-primary" />
      
    <input type="button" value="按钮" class="btn btn-primary btn-lg" />
      
    <input type="button" value="按钮" class="btn btn-primary btn-sm" />
      
    <input type="button" value="按钮" class="btn btn-primary btn-xs" />

    <br><br>
      
    <input type="button" value="按钮" class="btn btn-primary" />
      
    <input type="button" value="按钮" class="btn btn-primary active" />
      
    <input type="button" value="按钮" class="btn btn-primary disabled" />

    <br><br>
      
    <a href="#" value="按钮" class="btn btn-primary">按钮</a>
      
    <button class="btn btn-primary">按钮</button>
      
    <br><br>
      
    <button class="btn btn-primary btn-block">按钮</button>
      
</div>

</body>
      
    <script src="js/jquery-2.1.3.js"></script>
      
    <script src="js/bootstrap.js"></script>
      
</html>

  2. 按钮组
    • class=btn-group
    • 若希望按钮组的宽度和容器宽度一样，则可设置class=btn-group-justified，需要注意的是在按钮组中只有a标签的可以和容器宽度一样，button和input标签均不能和容器同宽度
    • 若希望按钮组垂直排列，则可设置class=btn-group-vertical
    • btn-group一般不与btn-group-vertical同时使用
    • 表示箭头上下的可以设置class=dropdown dropup
    • 控制按钮组的大小class=btn-group-(lg | sm | xs)，以上的demo及demo效果如下所示
    • <!DOCTYPE HTML>
      
<html>
      
    <head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      
        <title>无标题文档</title>
      
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
      
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href="css/bootstrap.css">
      
        <style>
      
            .glyphicon-heart {font-size: 100px; color: red;}
      
        </style>
      
    </head>
      
<body>

<div class="container">
      
    <div class="btn-group">
      
        <button class="btn btn-primary">按钮1</button>
      
        <button class="btn btn-primary">按钮2</button>
      
        <button class="btn btn-primary">按钮3</button>
      
    </div>
      
    <br><br>
      
    <div class="btn-group btn-group-justified">
      
        <button href="#" class="btn btn-primary">按钮1</button>
      
        <button href="#" class="btn btn-primary">按钮2</button>
      
        <button href="#" class="btn btn-primary">按钮3</button>
      
    </div>
      
    <br><br>
      
    <div class="btn-group btn-group-justified">
      
        <a href="#" class="btn btn-primary">按钮1</a>
      
        <a href="#" class="btn btn-primary">按钮2</a>
      
        <a href="#" class="btn btn-primary">按钮3</a>
      
    </div>
      
    <br>
      
    <div class="btn-group-vertical">
      
        <button class="btn btn-primary">按钮1</button>
      
        <button class="btn btn-primary">按钮2</button>
      
        <button class="btn btn-primary">按钮3</button>
      
    </div>
      
    <div class="btn-group-vertical btn-group-lg">
      
        <button class="btn btn-primary">按钮1</button>
      
        <button class="btn btn-primary">按钮2</button>
      
        <button class="btn btn-primary">按钮3</button>
      
    </div>
      
    <div class="btn-group-vertical btn-group-sm">
      
        <button class="btn btn-primary">按钮1</button>
      
        <button class="btn btn-primary">按钮2</button>
      
        <button class="btn btn-primary">按钮3</button>
      
    </div>
      
    <div class="btn-group-vertical btn-group-xs">
      
        <button class="btn btn-primary">按钮1</button>
      
        <button class="btn btn-primary">按钮2</button>
      
        <button class="btn btn-primary">按钮3</button>
      
    </div>
      
    <br><br>
      
    <a href="#" class="btn btn-primary">按钮<span class="caret"></span></a>
      
    <br><br>
      
    <a href="#" class="btn btn-primary dropup">按钮<span class="caret"></span></a>
      
    <br><br>
      
    <div class="btn-group dropup">
      
        <button class="btn btn-primary">按钮</button>
      
        <button class="btn btn-primary"><span class="caret"></span></button>
      
    </div>
      
</div>

</body>
      
    <script src="js/jquery-2.1.3.js"></script>
      
    <script src="js/bootstrap.js"></script>
      
</html>

boostrap按钮的更多相关文章

  1. 用H5+Boostrap做简单的音乐播放器

    前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...

  2. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  3. H5+Boostrap的音乐播放器

    H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...

  4. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

  5. bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询

    bootstrap-table自带搜索框感觉有点丑,我们可以把搜索功能单独拉出来放到页面的某一个位置. 首先我们看一下官方演示: 如果你感觉集成的检索框不太好看,而且我们也不想让搜索框和列表放到一块去 ...

  6. 关于boostrap的modal隐藏问题（前端框架）

    Modal(模态框) 首先,外引boostrap和Jquery的文件环境: <link rel="stylesheet" href="https://cdn.sta ...

  7. 在ASP.NET MVC中使用Boostrap实现产品的展示、查询、排序、分页

    在产品展示中,通常涉及产品的展示方式.查询.排序.分页,本篇就在ASP.NET MVC下,使用Boostrap来实现. 源码放在了GitHub: https://github.com/darrenji ...

  8. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  9. Boostrap bootstrap-table插件使用教程

    bootstrap table 简介及特性 简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...

随机推荐

  1. 自己总结python用xlrd\xlwt读写excel

    1.首先安装xlrd\xlwt模块 xlrd模块下载地址: https://pypi.python.org/pypi/xlrd xlwt模块下载地址: https://pypi.python.org/ ...

  2. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  3. php 使用phpqrcode类生成带有logo的二维码 使logo不失真（透明）

    在开发中 发现phpqrcode类在加入logo时,如果 logo 是 png 图像带有透明区域时,二维码上都无法正常完美的显示出来 解决方法便是:修改phpqrcode文件中的 QRimage类下的 ...

  4. js 实现 C# 的 format 方法

    2014-11-08 12:18:51 更新,修复原形链方法被当作关键词的bug,其实之前是想用全局关键词的,不过还是算了,array里有太多单词了.                          ...

  5. linux下php上传文件注意

    linux下php上传文件注意1.修改上传目录权限linux 修改某目录下所有所有子目录权限chmod -R 777 html修改某目录为任何用户都用写读执行权限chmod a+rwx html2.设 ...

  6. [转] .NET 3.5中MSChart组件的ImageLocation属性含义

    在.NET程序/网站中如果要生成统计图表/图形,以前可以采用OWC(Office Web Components),如OfficeXP组件OWC10.Office2003组件OWC11.OWC采用COM ...

  7. Android 子线程中进行UI操作遇到的小问题

    今天在学习<第一行Android代码>第9章-子线程进行UI操作时遇到了一些问题. 代码是这样的: ... import java.util.logging.Handler; ... pu ...

  8. Android UI开发第三十一篇——Android的Holo Theme

    好长时间没写Android UI方面的文章了,今天就闲扯一下Android的Holo主题.一直做android开发的可能都知道,Android 系统的UI有过两次大的变化,一次是android 3.0 ...

  9. Linux&shell之结构化命令

    写在前面:案例.常用.归类.解释说明.(By Jim)使用if-then语句如果命令的退出状态是0(成功执行命令),将执行then后面的所有命令.如果命令的退出状态是0以外的其他值,那么then后面的 ...

  10. COJ 1008 WZJ的数据结构（八） 树上操作

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=986 WZJ的数据结构(八) 难度级别:E: 运行时间限制:3000ms: ...