【菜鸟学习笔记】bootstrap_按钮组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<button type="button" class="btn btn-danger">5</button>
</div>
<hr>toolbar</hr>
<div class="toolbar" type="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<button type="button" class="btn btn-danger">5</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<button type="button" class="btn btn-danger">5</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<button type="button" class="btn btn-danger">5</button>
</div>
</div>
<hr>嵌套</hr>
<div class="btn-group">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<div class="btn-group">
<button class="btn btn-success 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</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
</ul>
</div>
</div>
<hr>竖排</hr>
<div class="btn-group-vertical">
<button type="button" class="btn btn-danger">1</button>
<button type="button" class="btn btn-danger">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-danger">4</button>
<div class="btn-group">
<button class="btn btn-success 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</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
</ul>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

时间: 2024-10-09 19:04:03

【菜鸟学习笔记】bootstrap_按钮组的相关文章

&lt;Bootstrap&gt; 学习笔记五. 按钮组的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet&

【菜鸟学习笔记】bootstrap_下拉菜单

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

IDA学习笔记--VS2008按钮事件捕捉

http://blog.csdn.net/ccnyou/article/details/8521611 IDA笔记--VS2008按钮事件捕捉 用到工具: IDA Proc C32Asm Rescope VS2008 LordPE 实例程序:MFCDemo.exe(附下载链接),我们目标是找到Button1对应的函数的地址处 附件包含:博客文章原文文档,文章中用到的MFCDemo程序. 下载链接:http://download.csdn.net/detail/ccnyou/5012040 1,首

css3学习笔记之按钮

基本按钮样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!DOCTYPE html> <html> <head> <style> .button {     background-color: #4CAF50;     border: black;/**/     color: white;/*字体颜色*/     padding: 15px 

《机器学习实战》菜鸟学习笔记(一)

<机器学习实战>终于到手了,开始学习了.由于本人python学的比较挫,所以学习笔记里会有许多python的内容. 1. python及其各种插件的安装 由于我使用了win8.1 64位系统(正版的哦),所以像numpy 和 matploblib这种常用的插件不太好装,解决方案就是Anaconda-2.0.1-Windows-x86_64.exe 一次性搞定. 2.kNN代码 1 #-*-coding:utf-8-*- 2 from numpy import * 3 import operat

Linux shell 菜鸟学习笔记....

20171123 Linux shell 基础学习笔记1. shell 的开始 一般是 #!/bin/bash 通过 #! 来唯一指定使用的shell路径 其他的 # 都表示注释.2. shell 的变量 定义变量直接用 variablename= value 就可以 其中变量名与等号之间没有空格. 使用变量的时候 是 ${vairablename} 的方式进行使用 大括号可以有可以没有,但是建议有. 可以使用 for file in `ls /etc/` 的方式来循环取得文件名. 使用do d

android菜鸟学习笔记29----Android应用向用户发送提示信息的方式总结

常见的向用户发送提示信息的方式有3种,分别为: 1)发送Toast信息 2)弹出对话框 3)发送通知 总结如下: 方式1:发送Toast信息: 这种方式最简单,在之前的学习中多次使用过.Toast是在一个浮动于应用之上的View中显示信息,显示一定的时间间隔后自动消失,不可获得焦点. 最简单的用法就是之前的学习中一直使用的:通过一个静态的makeText()方法返回一个Toast对象,然后调用show()方法. 如: 布局文件添加一个Button: 1 <Button 2 3 android:i

android菜鸟学习笔记27----Fragment的简单使用

1.Fragment的生命周期: 简单在新建一个MyFragment继承自Fragment,重写各个生命周期回调方法,各个方法中直接输出标识相关函数被调用的信息. 重写MainActivity的各个生命周期回调方法,同样输出标识信息. MyFragment.java: 1 public class MyFragment extends Fragment { 2 3 @Override 4 5 public void onActivityCreated(Bundle savedInstanceSt

《r语言实战》菜鸟学习笔记(一)

打算学习一下r语言,不知道从什么地方开始学习,加上本人的数理统计基础比较薄弱,所以就漫无目的的从网上找教程. 其实我逛的最多的网站还是知乎,读了好多很好的答案后,我选择了两本书,<153分钟学会r><r语言实战>.前者大概扫了一眼,不太适合边看书边敲代码(我个人比较喜欢这种),所以后者就比较适合我,这套书还是比较适合菜鸟看的,我还看过<集体智慧编程>,很不错. 下面开始了第一段程序.(博客园没有r语言选项,只好用plain txt了) 1 age <- c(1,3