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. case 后面可以接汉语

    switch($_POST['rtype']){        case "图片":         $type="image";break;        c ...

  2. PS抠图神器：KNOCKOUT 2.0

    从优设上转载~~太好用了,保存下来以备不时之需. 本人亲身实践~~先看使用成果~~哈哈~~ 原版图 : 抠过的图: 主要看飘逸的发丝~~~而且全程操作不超过5分钟!! 下载地址: http://vdi ...

  3. python运维开发之第四天

    一.装饰器 1.器:代表函数,装饰器本质是函数,(装饰器他函数) 2.功能:为其他函数添加附加功能 3.原则: (1)不能修改被装饰函数的源代码 (2)不能修改被装饰函数的调用方式 4.实现装饰器知识 ...

  4. 查看 yum 安装软件包的路径

    yum:列出已安装的安装包 [root@localhost ~]# yum list | grep mysql akonadi-mysql.x86_64 1.9.2-4.el7 base apr-ut ...

  5. UIImageView设置为圆形

       CGFloat headimageX = self.view.frame.size.width * 0.2; CGFloat headimageY = self.view.frame.size. ...

  6. iOS常见内存泄漏解决

    iOS常见内存泄漏解决     1 OC和CF转化出现的内存警告 CFStringRef cfString = CFURLCreateStringByAddingPercentEscapes(kCFA ...

  7. JDBC操作TimesTen

    无论是操作本地的还是远程的TimesTen服务,客户端都需要安装Tiems Client,并配置客户端DSN. 基本信息如下: 1:创建客户端DSN 点击“添加”: 双击“TimesTen Clien ...

  8. JAVA与C#关于JSON序列化的比较

    JAVA CODE: import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java. ...

  9. [Android] 混音线程MixerThread

    MixerThread是Android音频输出的核心部分,所有Android的音频都需要经过MixerThread进行混音后再输出到音频设备. MixerThread的继承关系如下: MixerThr ...

  10. Qt 中如何捕获窗口停用和激活的消息

    最近一直在用Qt做一个简单的俄罗斯方块的游戏,由于要实现一个暂停游戏的功能,就是当鼠标移出正在运行的游戏,点击电脑桌面上的其他位置时,这个时候游戏暂停.在这里把实现过程简单的记录一下,作为一个学习笔记 ...