bootstrap按钮组

种类

-a, input , button

块级

btn-block

按钮组

btn-group

btn-group-justified

btn-group-vertical

        </div>

        <div class="btn-group">

            <button class="btn btn-primary">按钮2</button>

        </div>

        <div class="btn-group">

            <button class="btn btn-primary">按钮3</button>

        </div>

    </div>

    <br><br>

    <div class="btn-group-vertical">

        <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>

    <div class="btn-group-vertical btn-group-lg">

        <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>

    <div class="btn-group-vertical btn-group-sm">

        <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>

    <div class="btn-group-vertical btn-group-xs">

        <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><br>

    <a href="#" class="btn btn-primary">按钮 <span class="caret"></span></a>

    <button class="btn btn-primary">按钮 <span class="caret"></span></button>

    <input type="button" value="按钮" class="btn btn-primary"><span class="caret"></span>

    <div class="btn-group">

           <a href="#" class="btn btn-primary">按钮</a>

        <a href="#" class="btn btn-primary"><span class="caret"></span></a>

    </div>

    <div class="btn-group">

           <button class="btn btn-primary">按钮</button>

        <button class="btn btn-primary"><span class="caret"></span></button>

    </div>

    <div class="btn-group dropup">

           <button class="btn btn-primary">按钮</button>

        <button class="btn btn-primary"><span class="caret"></span></button>

    </div>

    <br><br>

    <div class="github-style">

        <div class="btn-group btn-group-sm">

            <button class="btn btn-default active"><span class="glyphicon glyphicon-eye-open"></span> Watch <span class="caret"></span></button>

            <button class="btn btn-default">3,064</button>

        </div>

        <div class="btn-group btn-group-sm">

            <button class="btn btn-default active"><span class="glyphicon glyphicon-star"></span> Unstar</button>

            <button class="btn btn-default">36,296</button>

        </div>

        <div class="btn-group btn-group-sm">

            <button class="btn btn-default active"><span class="glyphicon icon-fork"></span> fork</button>

            <button class="btn btn-default">9,258</button>

        </div>

    </div>

</div>

</body>

<script src="js/jquery-1.11.1.js"></script>

<script src="js/bootstrap.js"></script>

</html>

bootstrap按钮组的更多相关文章

BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和下拉菜单的基本类 dropdown-toggle dropdow ...
Bootstrap按钮组学习
简介通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置当为 .btn-group 中的元素应用工具提示或 ...
bootstrap 按钮组的嵌套
您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group .当您想让下拉菜单与一系列按钮组合使用时,就会用到这个. 实例: <!DOCTYPE ...
Bootstrap 按钮组
连在一起的按钮:.btn-group <div class="btn-group" role="group"> <button class=& ...
Bootstrap按钮组按钮工具栏嵌套
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
Bootstrap-CL：按钮组
ylbtech-Bootstrap-CL:按钮组 1.返回顶部 1. Bootstrap 按钮组按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Boot ...
Bootstrap<基础十三> 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
Bootstrap系列 -- 29. 按钮组
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...

随机推荐

python中配置文件写法
import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) print(BASE_DIR) USE ...
C++11
http://stackoverflow.com/questions/388242/the-definitive-c-book-guide-and-list http://www.open-std.o ...
Nginx配置优化的几个参数
worker_processes 8 一般CPU(i/o)密集型配置为核数相同,网络(i/o)密集型配置为核数倍数(我配置为2倍) worker_cpu_affinity(这个没用过) 仅适用于lin ...
Effective Objective-C 2.0 — 第14条：理解“类对象“的用意
每个实例都有一个指向Class 对象的指针,用以表明其类型,而这些 Class 对象则构成了类的继承体系. 如果对象类型无法在编译期确定,那么就应该使用类型信息查询方法来探知. 尽量使用类型信息查询方 ...
C-指针
//格式:变量类型 *变量名//定义了一个指针变量p//指针变量只能存储地址//指针就一个作用:能够根据一个地址值,访问对应的存储空间//指针变量p前面的int:指针变量p只能指向int类型的数据in ...
kafka＋zookeeper环境配置（Mac 或者 linux环境）
一.zookeeper下载与安装 1)下载 adeMacBook-Pro:zookeeper_soft apple$ wget http://mirrors.cnnic.cn/apache/zooke ...
jquery点击label触发2次的问题
今天写问卷的时候遇到个label点击的时候,监听的click事件被执行两次:产生这个的原因么...事件冒泡 <div class="questionBox checkBox" ...
使用Minify来优化网站性能
Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能.它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的 ...
动态调用web服务
通常我们在程序中需要调用WebService时,都是通过“添加Web引用”,让VS.NET环境来为我们生成服务代理,然后调用对应的Web服务.这样是使工作简单了,但是却和提供Web服务的URL.方法名 ...
R语言练习（一）
b = seq(from=0, to=1, by=0.001) #一次方 l1 = function(b){ b^1 } y1 = l1(b) #二次方 l2 = function(b){ b^2 } ...

bootstrap按钮组

bootstrap按钮组的更多相关文章

随机推荐

热门专题