Bootstrap页面布局14 - BS按钮群组
首先看看这个代码:
<div class='btn-group'>
<button type='button' class='btn'>计算机</button>
<button type='button' class='btn'>网络</button>
<button type='button' class='btn'>桌面项目</button>
</div>
将功能相近的按钮分成一组,bootstrap 为我们设定了该组的样式
如图:

还可以进行更加复杂的分组
<div class='btn-toolbar'>
<div class='btn-group'>
<button type='button' class='btn'>计算机</button>
<button type='button' class='btn'>网络</button>
<button type='button' class='btn'>桌面项目</button>
</div>
<div class='btn-group'>
<button type='button' class='btn'>按钮一</button>
<button type='button' class='btn'>按钮二</button>
<button type='button' class='btn'>按钮三</button>
</div>
</div>
如图:

使用这种方法可以为网站创建复杂的工具栏
Bootstrap页面布局14 - BS按钮群组的更多相关文章
- Bootstrap页面布局13 - BS按钮
bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a> <button></button> <input type='butt ...
- Bootstrap页面布局15 - BS带下拉菜单的按钮
带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...
- Bootstrap历练实例:基本按钮群组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局19 - BS提示信息
提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...
- Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
随机推荐
- JAVA基础学习之 Map集合、集合框架工具类Collections,Arrays、可变参数、List和Set集合框架什么时候使用等(4)
package com.itcast.test20140113; import java.util.ArrayList; import java.util.Arrays; import java.ut ...
- 微信jsapi接口测试
微信jsapi接口测试 <?php require_once 'lib.inc.php'; $wx = new WxApi(); if(!isset($_GET['code'])){ heade ...
- WITH AS短语,也叫做子查询部分(subquery factoring)
可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到. 作为提供数据的部分. 代码例子: with temp as (select ID, Type_Name, Type_ID ...
- 分享Kali Linux 2016.2第36周镜像虚拟机
分享Kali Linux 2016.2第36周镜像虚拟机 9月9日,Kali Linux官方发布Kali Linux 2016.2周更新镜像.今天以64位镜像安装了一个虚拟机,分享给大家.该虚拟机 ...
- Web 设计新趋势: 使用 SVG 代替 Web Icon Font
如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...
- 【BZOJ】1049: [HAOI2006]数字序列(lis+特殊的技巧)
http://www.lydsy.com/JudgeOnline/problem.php?id=1049 题意:给一个长度为n的整数序列.把它变成一个单调严格上升的序列.但是不希望改变过多的数,也不希 ...
- 使用 CJSON 在C语言中进行 JSON 的创建和解析的实例讲解
本文用代码简单介绍cjson的使用方法,1)创建json,从json中获取数据.2)创建json数组和解析json数组 1. 创建json,从json中获取数据 #include <stdio. ...
- Notepad++ Shortcuts 快捷键
Ctrl-C Copy Ctrl-X Cut Ctrl-V Paste Ctrl-Z Undo Ctrl-Y Redo Ctrl-A Select All Ctrl-F L ...
- IplImage 与 QImage 相互转换
在使用Qt和OpenCV编程时,对于它们各自的图像类QImage和IplImage难以避免的需要互相之间的转换,下面我们就来看它们的相互转换. 1. QImage 转换为 IplImage IplIm ...
- FXK Javascript
Javascript是一门神奇的语言,很不爽的一门语言,很纠结的一门语言. 以下内容,专业人士请不要看,只供像我一样的菜鸟参考. (1)Javascript找不到函数.明明已经引用了JS文件,却提示找 ...