看程序学bootstrap12-组件之按钮组

最新推荐文章于 2023-09-01 12:37:05 发布
最新推荐文章于 2023-09-01 12:37:05 发布
阅读量86 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/93510087
版权

示例 1 : 按钮组

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

示例 2 : 按钮工具栏

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
  <button type="button" class="btn btn-default">基础</button>
  <button type="button" class="btn btn-default">中级</button>
  <button type="button" class="btn btn-default">高级</button>
</div>
 
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
 
<div class="btn-group" role="group" aria-label="framework">
  <button type="button" class="btn btn-default">Hiber</button>
  <button type="button" class="btn btn-default">Struts</button>
  <button type="button" class="btn btn-default">Spring</button>
</div>
</div>

示例 3 : 按钮组大小

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
br{
margin:20px;
}
</style>
 
<div class="btn-group btn-group-lg" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
 
<div class="btn-group btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

示例 4 : 垂直排列的按钮组

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-group-vertical" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

示例 5 : 复选框

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" checked>LOL(默认选中)
  </label>
  <label class="btn btn-default">
    <input type="checkbox" > DOTA
  </label>
  <label class="btn btn-default">
    <input type="checkbox" > WOW
  </label>
</div>

示例 6 : 单选框

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" checked>LOL(默认选中)
  </label>
  <label class="btn btn-default">
    <input type="radio" > DOTA
  </label>
  <label class="btn btn-default">
    <input type="radio" > WOW
  </label>
</div>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap--CSS组件--输入框组(input-group)
王欢的博客
12-16 2万+
了解table-cell的表格width设置为1%的原因。http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,in
Bootstrap-select下拉多选框+选中项添加radio单选按钮组
ycsss的博客
09-20 4328
目录一、问题描述二、具体实现1. 下载Bootstrap-select及汉化插件并引入2. bootstrap-select下拉多选实现HTMLJS三、参考博客 一、问题描述 工作中遇到的需求，需要将下拉单选框改成下拉多选框，因此使用Bootstrap-select插件完成。这个下拉单选框可以通过按钮切换为输入框，选中项或输入项都添加为radio单选按钮。过程中遇到了以下问题。 Bootstrap-select显示出错，总是显示两个下拉多选框 Bootstrap-select宽度width问题 radio
Bootstrap系列之按钮组（Button group）
老__L的博客
05-28 3282
按钮组（Button group）
html输入框组摁钮组,Bootstrap CSS组件之输入框组
weixin_30889555的博客
06-04 455
本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下了解table-cell的表格width设置为1%的原因。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。input-group(input-group-xs,input-group-sm,i...
bootstrap-switch开关组件
热门推荐
nbme的博客
08-20 1万+
bootstrap中文网上有这么一个bootstrap-switch组件，很实用，看demo学习并记录一下。 $('[name="status"]').bootstrapSwitch({ onText:"启动", offT
BootStrap--CSS组件--导航条(navbar)
王欢的博客
12-16 9535
1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav 2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form 3.导航条中的按钮，文本，链接navbar-btn、bavbar-text、navbar-link 4.导航条中的
【Web】BootStrap fileinput文件上传组件实例代码以及遇到的问题
每一名出色的架构师，必定是一位优秀程序员
05-28 2159
BootStrap fileinput文件上传组件实例代码以及遇到的问题 最近用到图片文件上传的功能，对比之后本人决定选用bootstrap fileinput控件，本篇介绍如何使用bootstrap fileinput.js，file input等插件，该插件功能强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能...
学习Bootstrap 5的第一天
m0_74293254的博客
09-01 1033
Bootstrap 简介Bootstrap 简介什么是 Bootstrap 5？Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于创建响应式、移动优先的网站。Bootstrap5 与3 & 4的对比总体对比：具体对比：Bootstrap 3、4和5之间存在一些显著的区别。
Flask-Bootstrap 分析
示例和笔记
06-01 755
Flask-Bootstrap是一个基于Bootstrap前端框架的Flask扩展，提供易用的前端组件和模板，可以快速搭建美观的Web界面。
算是最全面的bootstrap-table的介绍了吧
cykj202103的博客
07-10 6760
属性默认值描述heightundefined表格的高度classes表格的类名称buttons{}按钮,bootstraptable加载的按钮集,可自定义表头样式'''-'当数据为 undefined 时显示的字符localeundefined语言设置false是否开启虚拟滚动undefined虚拟滚动条项目高度sortabletrue是否启用排序sortClassundefined被排序的td标签的class名silentSorttrue。
bootstrap-closable-tab tab可关闭组件
06-10
Bootstrap是一款广泛使用的前端框架，它提供了...通过研究这些文件，你可以学习如何自定义和扩展Bootstrap组件，以及如何将这种功能集成到自己的项目中。这不仅加深了对Bootstrap框架的理解，还提升了前端开发技能。
Bootstrap CSS组件之输入框组
01-21
本文实例为大家分享了Bootstrap输入框组的具体代码，供大家参考，具体内容如下 了解table-cell的表格width设置为1%的原因。 http://www.tuicool.com/articles/VzUVfyi 通过向输入域添加前缀和后缀的内容，您可以向...
bootstrap-select：使用按钮下拉菜单对@twitter引导程序进行自定义选择（最初由Silvio Moreto进行）
02-01
在Bootstrap框架中，`<select>` 元素通常看起来并不符合整体设计风格，Bootstrap Select 插件则解决了这个问题，提供了与 Bootstrap 主题一致的视觉效果。通过使用 CSS 和 JavaScript，该插件可以将常规的下拉选择...
startbootstrap-sb-admin-2-master
09-26
SB Admin 2 利用了 Bootstrap 的网格系统、表单、按钮、导航及其他组件，提供了一套完整的后台界面解决方案。 SB Admin 2 的特点包括但不限于以下几点： 1. **响应式布局**：模板设计时考虑了不同设备的兼容性，...
本地小说阅读器可执行文件新版
08-29
导入小说，需通过文件-转换，选择txt小说，生成同名小说文件夹； 之后通过文件-小说，选择小说文件夹，就完成小说导入了。 txt小说只需转换一次。
452、基于单片机的智能水杯系统设计（原理图、源代码）
08-29
452、基于单片机的智能水杯系统设计（原理图、源代码） 该系统为单片机的智能水杯系统，实现水质、水温检测，智能控温等设计； 功能： 1、使用51单片机为核心设计； 2、水质TDS值检测，检测水质情况； 3、水温检测； 4、温度和TDS值显示在LCD1602上； 5、按键实现水温阈值控制； 6、加热模块和制冷模块控制，控制水温； 7、声光告警电路，实现温度到达提醒； 8、提供原理图和源代码；
d3dcsxd_46.dll
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
c语言做的一个任务管理器.zip
08-29
c语言入门，c语言做的一个任务管理器，包含全量功能源码，及相关文档说明，供大家学习使用！
Spring Cloud与Seata 2.0集成：零基础安装到AT模式实战的完整教程.zip
最新发布
08-29
Spring Cloud与Seata 2.0的集成是一个涉及微服务架构和分布式事务管理的复杂过程。本教程将从零基础开始，指导你如何安装并配置Spring Cloud环境，以及如何集成Seata 2.0的AT模式。首先，你需要准备相应的开发环境，包括操作系统、Java、Maven和Git等工具。接着，通过Spring Initializr创建Spring Cloud项目，并添加所需的微服务组件依赖。然后，下载并配置Seata Server，同时设置Nacos或Eureka作为注册中心。在Spring Cloud应用中引入Seata AT依赖，并配置事务管理器和协调器。通过编写测试用例来模拟分布式事务场景，并验证事务的一致性和原子性。教程还将涵盖问题排查、性能优化、部署上线、以及使用Seata Dashboard进行监控和告警配置。最后，教程会总结关键步骤，展望Spring Cloud和Seata的未来发展趋势，帮助你构建一个健壮的分布式系统。
Bootstrap 按钮组与栅格系统快速入门
"Bootstrap 按钮组和Bootstrap栅格系统是前端开发中的重要组成部分，尤其在使用Bootstrap框架时。Bootstrap是Twitter推出的一个流行的前端开发框架，它基于HTML、CSS和JavaScript，简化了网页和应用程序的构建过程。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值