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. Javascript模块化编程 require.js使用详解

    一.为什么用require.js,产生的背景 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载. & ...

  2. MongoDB-性能优化之索引

    首先看一个实例 >;i<;i++){ db.indexdemo.insert({),"create":new Date});} WriteResult({ }) > ...

  3. Hibernate的查询语言之HQL(一)——快速入门

    Hibernate提供异常强大的查询体系,使用Hibernat有多种查询方式可以选择:即可以使用Hibernate的HQL查询,也可以使用条件查询,甚至可以使用原生的SQL查询语句.不仅如此, Hib ...

  4. C++11原子操作性能测试

    测试结论是发现C++11原子操作在性能上,比以往用到的InterlockedIncrement或__sync_add_and_fetch性能上慢了1倍左右. 另外补充一点,在对原子变量进行比较的时候, ...

  5. winform拖动无边框窗体

    这个无边框拖动船体,代码很少,却总是记不住,于是就在网上搜了这段代码,记录一下,省的再忘 using System; using System.Collections.Generic; using S ...

  6. express+jade+bootstrap+mongdb simple CRUD test

    1:当前环境 y@y:~$ node --version && express -V && mongo --version v0.12.2 MongoDB shell ...

  7. Currency Exchange

    主要找正环: #include<cstdio> #include<cstring> #include<cstdlib> #include<algorithm& ...

  8. Linux2.6内核--内存管理（1）--分页机制

          在内核里分配内存可不像在其他地方分配内存那么容易.造成这种局面的因素很多.从根本上讲,是因为内核本身不能像用户空间那样奢侈的使用内存.内核与用户空间不同,它不具备这种能力,它不支持简单便捷 ...

  9. Android应用开发学习笔记之多线程与Handler消息处理机制

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 和JAVA一样,Android下我们可以通过创建一个Thread对象实现多线程.Thread类有多个构造函数,一般通 ...

  10. 【HDOJ】4985 Little Pony and Permutation

    水题. #include <cstdio> #define MAXN 100005 int buf[MAXN], n; int main() { int i, j, k; while (s ...