按钮组件.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--bootstrap要引入的文件：bootstrap.min.css,jquery.min.js,bootrap.min.js-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量-->
<!--<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>-->
<!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper-->
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset"> <hr />
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> <hr />
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button> <hr />
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button> <hr />
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button> <hr />
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button> <hr />
<button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled">Block level button</button>
<a type="button" class="btn btn-secondary btn-lg btn-block disabled">Block level button</a> <hr />
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
Single toggle
</button> <hr />
<div class="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary active" id="choose1">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-danger">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary" >
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</body>
</html>
按钮组件.html的更多相关文章
- JAVA学习Swing章节按钮组件JButton的简单学习
package com.swing; import java.awt.Container; import java.awt.Dimension; import java.awt.GridLayout; ...
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- 自己开发的 vue 滑动按钮组件 vue-better-slider
写在前面的 这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档. 一个 Vue 的滑动按钮组件,有 ...
- 【Android 应用开发】Android - 按钮组件详解
总结了Android中常用的按钮用法 示例源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6852091 -- GitHu ...
- Android - 按钮组件详解
总结了Android中常用的按钮用法 示例源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6852091 -- GitHu ...
- 第二百三十七节，Bootstrap图标菜单按钮组件
Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...
- 第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件
jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...
- 第一百九十七节，jQuery EasyUI，LinkButton(按钮)组件
jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...
- jQuery EasyUI，LinkButton(按钮)组件
转自:https://www.cnblogs.com/adc8868/p/6639570.html jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 ...
- Flutter学习笔记（11）--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
随机推荐
- 基于elasticsearch的自定义业务告警的设计思路
A系统与B系统之间有很多接口交互,但是有一段时间接口经常报错,作为开发如果不能第一时间知道问题且及时解决的话就会收到业务投诉,当月绩效凉凉. 如果你也有这种场景,那么你就需要一个及时告警的功能. 实现 ...
- VR中的“寻路（wayfinding）”
虚拟现实(VR)中很重要的一个问题就是Locomotion(用户在VR中的移动).这个Locomotion分为两种,一种是点对点的,如传送门的方式,一种是包含了可以操控的中间过程的,这种被称为“导航( ...
- jq中attr（）和prop() 属性的区别
query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要 ...
- Scala 异常处理
Scala 异常处理: parseURL("www.baidu.com") 会返回一个 Success[URL] ,包含了解析后的网址, 反之 parseULR("www ...
- QR 码详解（上）
关于二维码,我查了下资料,现在基本都在用日本的 QR 码,PDF417以及汉信码日常基本看不到.原因在于各方面来说,的确是 QR 码最为优秀.所以我准备写一篇介绍 QR 码的文章,如果是写书,可能不方 ...
- MySQLdb操作数据库
堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: + ...
- Node.js入门教程 第四篇 （流及文件操作）
流 Stream是Node.js中的抽象接口,有不少Node.js对象实现自Stream. 所有的Stream对象都是EventEmitter 的实例. 例如:fs模块(用于读写操作文件的模块) fs ...
- A-05 前向选择法和前向梯度法
目录 前向选择法和前向梯度法 一.前向选择法 1.1 余弦相似度求投影 1.2 举例 1.3 前向选择法优缺点 1.3.1 优点 1.3.2 缺点 二.前向梯度法 2.1 举例 2.2 前向梯度法优缺 ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- USART_FLAG_TXE和USART_FLAG_TC
在串口数据发送操作中,代码一般是这样写的: void USART_SendByte(USART_TypeDef* USARTx, uint8_t Data) { while(USART_GetFlag ...