`

Bootstrap--按钮组

 
阅读更多
http://v2.bootcss.com/components.html#buttonGroups
 <div class="bs-docs-example">
        <div class="btn-toolbar" style="margin: 0;">
<!--单一按钮组:将带有.btn类的一系列按钮包裹在.btn-group中-->
             <div class="btn-group">
                <button class="btn">1</button>
                <button class="btn">2</button>
                <button class="btn">3</button>
                <button class="btn">4</button>
             </div>
<!--多维按钮组:多个<div class="btn-group">放入<div class="btn-toolbar">中即可获得多维按钮组;垂直按钮组:.btn-group-vertical让一组按钮呈现出垂直方向堆叠的样式-->
             <div class="btn-group btn-group-vertical">
                <button class="btn"><i class="icon-align-left"></i></button>
                <button class="btn"><i class="icon-align-center"></i></button>
                <button class="btn"><i class="icon-align-right"></i></button>
             </div>
<!--按钮放入.btn-group中,并为其添加适当的菜单标签,即可让此按钮触发下拉菜单-->             
             <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">8<span class="caret"></span></button>
                	<ul class="dropdown-menu">
                  	<li><a href="#">9</a></li>
                  	<li><a href="#">10</a></li>
                  	<li><a href="#">11</a></li>
                  	<li class="divider"></li>
                  	<li><a href="#">12</a></li>
                </ul>
             </div>
<!--分列式按钮:左侧是一个标准形式的按钮,右侧是一个可触发下拉菜单的链接。-->
             <div class="btn-group">
                <button class="btn btn-danger">8</button>
                <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="#">9</a></li>
                  <li><a href="#">10</a></li>
                  <li><a href="#">11</a></li>
                  <li class="divider"></li>
                  <li><a href="#">12</a></li>
                </ul>
              </div><!-- /btn-group -->
<!--按钮式下拉菜单-->
<!--给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转,菜单的位置也会变为由下到上而不是由上到下了-->
			<div class="btn-group dropup">
                <button class="btn">18Dropup</button>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                <ul class="dropdown-menu">
                  	<li><a href="#">19</a></li>
                  	<li><a href="#">20</a></li>
                  	<li><a href="#">21</a></li>
                  	<li class="divider"></li>
                  	<li><a href="#">22</a></li>
                </ul>
            </div><!-- /btn-group -->
        </div>
    </div>



  • 大小: 20.4 KB
  • 大小: 18.3 KB
  • 大小: 16.2 KB
分享到:
评论

相关推荐

    bootstrap-5.1.3-dist.zip

    2. **预定义组件**:Bootstrap提供了丰富的预构建组件,如导航条(navbar)、模态框(modal)、下拉菜单(dropdown)、按钮组(button group)、卡片(card)等,这些组件简化了网页的开发过程。 3. **CSS样式**:...

    bootstrap-5.3.2-dist.zip

    1. **CSS**:Bootstrap的CSS部分定义了各种预设样式,如网格系统、排版、颜色方案、表单元素、按钮、导航等。这些样式通过Sass预处理器编译而来,使开发者能够快速定制主题和布局。 2. **JavaScript插件**:...

    bootstrap-3.4.1-dist 2.zip

    3. **组件**:Bootstrap 3包含多种可复用的组件,如导航条(navbar)、下拉菜单(dropdown)、模态框(modal)、轮播图(carousel)、按钮组(button group)和表单控件等,这些组件大大减少了自定义设计的工作量。...

    bootstrap-3.3.7-dist.zip

    - **按钮组**(Button Group)和**下拉菜单**(Dropdown):提供了将多个按钮或下拉菜单组合在一起的布局。 - **轮播图**(Carousel):可以创建滑动展示多张图片或内容的组件。 - **表单**(Forms):预设了表单...

    twitter-bootstrap-v2.1.1-0-gc52368d.zip

    4. **组件**:此版本包含各种组件,如下拉菜单、模态框、轮播图、导航条、按钮组、进度条等,这些组件为构建交互式网页提供了便利。 5. **JavaScript插件**:Bootstrap的JavaScript插件扩展了HTML元素的功能,例如...

    前端项目-startbootstrap-clean-blog.zip

    Bootstrap提供了丰富的组件(如导航栏、按钮、表单、网格系统等)和响应式设计,使得创建跨平台、适应各种设备的网页变得更加容易。 2. **响应式设计**:Clean Blog主题采用了Bootstrap的响应式布局,确保在不同...

    PyPI 官网下载 | bootstrap-py-0.4.2.tar.gz

    它支持快速构建导航栏、模态框、下拉菜单、按钮组、表单、网格系统等Bootstrap元素,同时简化了与后端数据交互的过程。 总结来说,"bootstrap-py-0.4.2.tar.gz"是Python开发者的一个利器,它将Bootstrap的前端优势...

    bootstrap及bootstrap-table

    2. **CSS样式**:Bootstrap提供了大量的预定义CSS类,可以快速应用到HTML元素上,如字体、颜色、间距、按钮、表单、导航等,极大地提高了开发效率。 3. **JavaScript插件**:Bootstrap内建了一些基于jQuery的插件,...

    bootstrap-2.3.2-dist

    2. **预定义的组件**:Bootstrap包含一系列预先设计的UI组件,如导航条、下拉菜单、按钮组、模态框、警告提示、表单元素等,这些组件大大简化了网页的开发过程。 3. **样式和排版**:Bootstrap提供了丰富的CSS类,...

    bootstrap-dropdown.js

    在Bootstrap框架中,下拉菜单通常被用在导航条或按钮组中,提供额外的选项或者子菜单。"bootstrap-dropdown.js" 文件包含了实现这些下拉效果的JavaScript代码。当用户点击一个具有下拉菜单的元素时,这个脚本会处理...

    bootstrap-multiselect下拉框多选单选条件筛选

    Bootstrap Multiselect提供了许多可配置的选项,例如`includeSelectAllOption`(是否包含全选选项),`selectAllText`(全选按钮的文字),`nonSelectedText`(未选中任何选项时的提示文字)等。你可以根据需求调整这些...

    bootstrap-3.3.2-dist

    Bootstrap 3.3.2提供了丰富的UI组件,包括导航栏(Navbar)、按钮(Buttons)、按钮组(Button Groups)、表单(Forms)、输入框(Input Groups)、表(Tables)、警告提示(Alerts)、进度条(Progress Bars)、...

    bootstrap-3.3.0-dist

    4. **组件**:Bootstrap 提供了一系列可重用的UI组件,如导航条(Navbar)、下拉菜单(Dropdowns)、按钮组(Button Groups)、轮播(Carousel)、警告提示(Alerts)、模态框(Modals)、缩略图(Thumbnails)、...

    bootstrap-3.3.4-dist

    2. **预定义的组件**:Bootstrap提供了许多预先设计的UI组件,如导航条(navbar)、按钮(button)、表单(form)、下拉菜单(dropdown)、模态框(modal)、警告提示(alert)、轮播(carousel)等,这些组件大大...

    bootstrap-3.4.1-dist.zip

    10. **按钮**: 有多种大小、颜色和样式可供选择,同时支持按钮组(Button Group)和按钮下拉(Button Dropdown)。 11. **导航**: 包括导航条(Navbar)、面包屑(Breadcrumbs)、分页(Pagination)、标签页(Tab...

    react-with-bootstrap-demo-master.zip

    它的网格系统、表单、按钮、模态等元素,使得开发者可以便捷地构建美观的布局。 在这个"react-with-bootstrap-demo-master"项目中,我们可以预期看到以下关键知识点: 1. **React组件**:项目可能包含了多个React...

    neon-bootstrap-admin-theme

    2. **预构建组件**:内含多种预设的UI组件,如导航栏、下拉菜单、按钮组、表单元素、面板、模态框、警告提示等,这些组件都是经过精心设计和优化的,可以直接用于项目中,大大提高了开发效率。 3. **图表集成**:...

    bootstrap-3.3.7-dist

    3. **CSS样式**:Bootstrap 3的CSS文件(通常命名为`bootstrap.css`或`bootstrap.min.css`)提供了全局的样式规则,涵盖了字体、颜色、间距、边框等基础样式,以及按钮、表格、图片等元素的样式。开发者可以通过...

    bootstrap-master.zip

    这些模板通常会演示导航栏(navbar)、表单、表格、按钮组、警告提示(alert)等各种元素的用法。 6. **图片资源**:"img"目录可能包含一些示例图片或者框架中用到的图片资源。 7. **示例代码**:可能包含README....

    java springMVC bootstrap bootstrap-table 分页等实例

    在这个实例中,Bootstrap被用来设计用户界面,包括导航栏、按钮、表单等元素,确保在不同设备上都能提供良好的用户体验。 bootstrap-table是一个基于Bootstrap的插件,用于创建具有排序、搜索、分页等功能的数据...

Global site tag (gtag.js) - Google Analytics