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. underscorejs-sortBy学习

    2.17 sortBy 2.17.1 语法 _.sortBy(list, iteratee, [context]) 2.17.2 说明 返回一个排序后的list拷贝副本. list为集合,如数组.对象 ...

  2. 10 款强大的JavaScript图表图形插件推荐

    转自:http://www.iteye.com/news/24535 网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器 ...

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

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

  4. 日期选择器（Query+bootstrap和js两种方式）

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  5. codevs 1153 道路游戏

    传送门   题目描述 Description 小新正在玩一个简单的电脑游戏.游戏中有一条环形马路,马路上有n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针 ...

  6. 在Xcode中如何屏蔽某个源文件的编译警告信息

    某些时候如果我们的源码在编译过程中出现大量的编译警告时,看起来是挺不爽的:但又确实没办法解决警告问题的时候,我们可以使用下面的方法来屏蔽指定的某个文件的所有警告信息. 1.在Xcode中选中工程文件. ...

  7. SCALA表达示简例

    作了解,感觉比一般的差距有点大哟. package com.hengheng.scala class HelloScala { } object HelloScala { def main(args: ...

  8. Mysql 主从复制，读写分离设置

    一个简单完整的 Mysql 主从复制,读写分离的示意图. 1. 首先搭建 Mysql 主从架构,实现 将 mater 数据自动复制到 slave MySQL 复制的工作方式很简单,一台服务器作为主机, ...

  9. vmware压缩磁盘空间的方法

    家里笔记本40G,可用空间怎么挤都只剩7G,从单位copy回来的linux虚拟机要10G,经检查实际使用空间5.7,也就是其他都是空余空间,可以释放掉.(只适合independent.Persiste ...

  10. Android--广播BroadcastReceiver

    前言 Android四大组件,Activity.Service.ContentProvider.BroadcastReceiver,除了BroadcastReceiver之外,其他的在之前的博客中都有 ...