Bootstrap按钮组简单实现代码

本文实例为大家分享了Bootstrap按钮组的具体代码，供大家参考，具体内容如下

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 按钮组 -->
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr>

<!-- 按钮组,垂直 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>

<!-- 按钮组嵌套下拉菜单 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown<span class="caret"></span></button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" >Another action</a></li>

</ul>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- 按钮组的组 -->
<div class="btn-toolbar" role="toolbar">

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<hr/>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">left</button>
<button type="button" class="btn btn-default">center</button>
<button type="button" class="btn btn-default">right</button>
</div>
<br/>

</div>

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

  • Bootstrap按钮组件详解

    Bootstrap按钮组件详解

    按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 结构方面:使用一个类名为btn-group的容器,把多个按钮放在这个容器中. 按钮组也是一个独立的组件,所以可以找到相应的源码文件: Less:buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行 <div class="btn-group"> <button type="button" class=&qu

  • Bootstrap每天必学之按钮

    Bootstrap每天必学之按钮

    1.按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: ☑ LESS版本:对应的源文件为buttons.less ☑ Sass版本:对应的源文件为_buttons.scss ☑ CSS版本:对应bootstrap.css文件第3131行-第3291行

  • BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)

    布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro

  • Bootstrap CSS组件之按钮组(btn-group)

    .btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的. 容器的多个分组以table风格进行显示,每组之间保持5px的left margin //源码 .btn-toolbar:before, .btn-toolbar:after{ displ

  • Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    Bootstrap导航栏各元素操作方法(表单、按钮、文本)

    本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单 导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默

  • 全面解析Bootstrap表单使用方法（表单按钮）

    全面解析Bootstrap表单使用方法（表单按钮）

    一.多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名".btn". <button class="btn btn-default" type="button&

  • bootstrap改变按钮加载状态

    bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个 data-loading-text="Loading..." 属性,然后js总体代码是这样: 复制代码 代码如下: <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary"

  • Bootstrap基本组件学习笔记之按钮组(8)

    Bootstrap基本组件学习笔记之按钮组(8)

    按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单. 0x01 基本用法 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

  • JS组件Bootstrap按钮组与下拉按钮详解

    本文先为大家分享按钮组的使用方法,具体内容如下 一.按钮组(Button Groups) 1.单个按钮组 用.btn-group封装多个带.btn的<button> <div class="btn-group"> <button class="btn">1</button> <button class="btn">2</button> <button class=&qu

随机推荐