Bootstrap 学习笔记11 按钮和折叠插件
复选框:
<div class="btn-group" data-toggle="buttons">
<label for="sex" class="btn btn-primary active">
<input type="checkbox" name="fa" value="体育" checked>体育
</label>
<label for="sex" class="btn btn-primary">
<input type="checkbox" name="fa" value="音乐">音乐
</label>
<label for="sex" class="btn btn-primary">
<input type="checkbox" name="fa" value="绘画" checked>绘画
</label>
<label for="sex" class="btn btn-primary">
<input type="checkbox" name="fa" value="IT" checked>IT
</label>
</div>
手风琴折叠:点击第二个第一个折叠
<!-- 手风琴折叠插件 -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分连接</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
第一部分内容
</div>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第2部分连接</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
第2部分内容
</div>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第3部分连接</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
第3部分内容
</div>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第4部分连接</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
第4部分内容
</div>
</div>
</div>
</div>
不建议JS语法写:
Bootstrap 学习笔记11 按钮和折叠插件的更多相关文章
- bootstrap学习笔记细化(按钮)
button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...
- bootstrap学习笔记(菜单.按钮)
下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle&q ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Python3+Selenium3+webdriver学习笔记11(cookie处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记11(cookie处理)'''from selenium im ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Ext.Net学习笔记11:Ext.Net GridPanel的用法
Ext.Net学习笔记11:Ext.Net GridPanel的用法 GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: < ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
随机推荐
- Oracle数据库控制台常用命令
安装好数据库以后可以通过“Win+R”打开控制台,在控制台登录Oracle输入命令来操作数据库. SQLPlus命令: SQLPlus命令是用来登录Oracle数据库的命令,有两种写法,分别如下: ( ...
- 01背包(第k优解)
Bone Collector II Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- python-docx 添加表格时很慢的解决方法
我们做监控系统的时候常需要给客户发送邮箱报告,附带一个word的文档,文档中插入表格给用户更直观的数据. 我用的时python-docx库操作文档,最近碰到,当往文档中插入表格时,随着表格行数的增多, ...
- adb logcat查看手机端日志
前言 做app测试,遇到异常情况,查看日志是必不可少的,日志如何输出到手机sdcard和电脑的目录呢?这就需要用logcat输出日志了以下操作是基于windows平台的操作:adb logcat | ...
- python里的排序
本篇文章主要讲: 自定义规则排序 多字段排序 开讲之前,先讲一些简单sorted()或者sort(),两者返回值不同!大家自行学习,不是本文的重点! sorted([5, 2, 3, 1, 4]) # ...
- React中state和props分别是什么?
整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下 ...
- 0基础入门 docker 部署 各种 Prometheus 案例 - 程序员学点xx 总集篇
目录 大家好, 学点xx 系列也推出一段时间了.虽然 yann 能力有限,但还是收到了很多鼓励与赞赏.对这个系列 yann 还是很喜欢的,特别是 Prometheus 篇,在期间经历公众号 100 篇 ...
- C#控制文本框(TextBox)只能输入正数,负数,小数
由于项目需要,需要写一个TextBox文本框,此文本框需要满足:只能输入正数,负数和小数.比如:3,0.3,-4,-0.4等等. 在网上找了许多正则表达式都不好用,由于本人又对正则表达式 ...
- spark复习笔记(6):RDD持久化
在spark中最重要的功能之一是跨操作在内存中持久化数据集.当你持久化一个RDD的时候,每个节点都存放了一个它在内存中计算的一个分区,并在该数据集的其他操作中进行重用,持久化一个RDD的时候,节点上的 ...
- mssql 取数据指定条数(例:100-200条的数据)
方法1:临时表 * into #aa from table order by time-- 将top m笔插入 临时表 select * from #aa order by time desc --d ...