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. 35 Search Insert Position(找到数的位置Medium)

    题目意思:在递增数组中找到目标数的位置,如果目标数不在数组中,返回其应该在的位置. 思路:折半查找,和相邻数比较,注意边界 class Solution { public: int searchIns ...

  2. 如何让IIS 8.0支持无后缀图片的访问

    进入“MIME类型”模块后,我们点击右侧的“添加”,然后填好文件扩展名和类型值.对于无后缀的图片文件,扩展名只需填写“点”符号即可,类型值根据图片文件实际的扩展名填写.如果是jpeg格式的,那么就填写 ...

  3. 字符串截取slice() substring() substr()的区别？

    获取子字符串 slice()        substr()    substring() 不会修改字符串本身,他们只是返回一个基本类型的字符串值 var str='abcdefghijklmn'; ...

  4. core文件生成总结

    1.确定系统支持生成core dump文件 ulimit -c    如果返回0, 可以ulimit -c unlimited 设定 2.kill 加上信号量, kill 信号如下 信号 信号值 功能 ...

  5. python中的builtin函数详解-第二篇

    classmethod(function) 这里不过多说明这个builtin方法的具体用法,python的文档和help函数已经给了这个方法充足的使用说明,所以我这里要说的时关于 classmetho ...

  6. ppt画笔标记在哪里|ppt中画笔工具功能怎么用?

    一.ppt中画笔工具功能在哪里? 这个画笔工具其实就相当于我们的一个标记工具,要实现标记功能首先将需要演示的PPT按住F5进入到放映状态,然后在右击ppt上的空白处就会弹出衣蛾对话框,在对话框中选择“ ...

  7. TCP回射服务器程序：str_echo函数

    str_echo函数执行处理每个客户的服务: 从客户读入数据,并把它们回射给客户 读入缓冲区并回射其中内容: read函数从套接字读入数据,writen函数把其中内容回射给客户 如果客户关闭连接,那么 ...

  8. Ant快速入门(四)-----Ant的任务(Task)

    到目前为止,我们已经掌握了Ant生成文件的基本结构,以及<project.../>,<target.../>,<property.../>等元素的配置方式.而< ...

  9. HDU3549 Flow Problem(网络流增广路算法)

    题目链接. 分析: 网络流增广路算法模板题.http://www.cnblogs.com/tanhehe/p/3234248.html AC代码: #include <iostream> ...

  10. LeetCode——Pascal's Triangle

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5,Retur ...