bootstrap - btn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
#login{
width:400px;
}
</style>
</head>
<body>
<div class="container">
<br>
<input type="button" value="默认样式">
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="成功" class="btn btn-success">
<input type="button" value="一般信息" class="btn btn-info">
<input type="button" value="警告" class="btn btn-warning">
<input type="button" value="危险" class="btn btn-danger">
<br><br>
<input type="button" value="按钮" class="btn">
<input type="button" value="按钮" class="btn btn-default">
<input type="button" value="按钮" class="btn btn-link">
<br><br>
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="首选项" class="btn btn-primary btn-lg">
<input type="button" value="首选项" class="btn btn-primary btn-sm">
<input type="button" value="首选项" class="btn btn-primary btn-xs">
<br><br>
<input type="text" class="form-control">
<input type="text" class="form-control input-lg">
<input type="text" class="form-control input-sm">
<br><br>
<input type="button" value="首选项" class="btn btn-primary">
<input type="button" value="首选项" class="btn btn-primary active">
<input type="button" value="首选项" class="btn btn-primary disabled">
<br><br>
<a href="#" class="btn btn-primary">按钮</a>
<button class="btn btn-primary">按钮</button>
<br><br>
<button class="btn btn-primary btn-block">按钮</button> </div> </body>
<script>
/*
按钮
基类
- btn
样式
- btn-default(默认)
- btn-link(链接)
大小
- btn-*[lg,sm,xs]
状态
- active
- disabled
种类
- a,input,button
块级
- btn-block
按钮组
- btn-grounp
- btn-grounp-justified
- btn-grounp-veritcal */
</script>
bootstrap - btn的更多相关文章
- bootstrap - btn 实例
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 第二百三十三节,Bootstrap表格和按钮
Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表格 Bootstrap ...
- Require,js配置使用心得
首先大家要知道requirejs是干嘛用的,要解释,那就用一句话说下:RequireJS是一个JavaScript文件和模块加载器接下来我们开始学会配置使用requireJs,当然在学习使用的过程中也 ...
- table2excel使用
原table2excel代码 /* * 采用jquery模板插件——jQuery Boilerplate * * Made by QuJun * 2017/01/10 */ //table2excel ...
- AngularJS 笔记1
2017-03-23 本文更新链接: http://www.cnblogs.com/daysme/p/6606805.html 什么是 angularjs 2009年有两个外国人创建,后由谷歌收购并开 ...
- jeecg中列表查询数据关联其他表的显示
1.A表字段:id,name;B表字段:id,name,fid(A表外键),现查询A表和B表的所有数据并且查询条件A,B都有,在前台页面list显示 2.后台方法: @RequestMapping(p ...
- BootStrap 关于input与btn的点击focus取消特效相关css
取消btn按钮点击出现的外边框: .btn:focus, /*清除btn按钮点击出现的边框*/.btn:active:focus,.btn.active:focus,.btn.focus,.btn:a ...
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- POJ 2373 Yogurt factory
简单DP. 这周所用的实际花费是上一周的花费+S与这周费用的较小值. #include<cstdio> #include<cstring> #include<cmath& ...
- UDP传输包大小(转)
源:UDP传输包大小 在进行UDP编程的时候,我们最容易想到的问题就是,一次发送多少bytes好? 当然,这个没有唯一答案,相对于不同的系统,不同的要求,其得到的答案是不一样的,我这里仅对 像ICQ一 ...
- Yii实现Password Repeat Validate Rule
在使用Yii时遇到这样的需求:在一个注册的页面输入两次密码,并验证两次输入是否一致.可是password的repeat的字段在数据库 并不存在.问题来了,如何创建一个password_repeat的属 ...
- UVa 459 - Graph Connectivity
题目大意:给你一个无向图的顶点和边集,让你求图中连通分量的个数.使用并查集解决. #include <cstdio> #include <cstring> #define MA ...
- bzoj2120: 数颜色 &&bzoj2453: 维护队列
题目大意: 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有多少.当然,A有时候会依据个人喜好 ...
- OpenCV点滴2
明天回家了-- 昨天去见了老师,去之前告诉自己不要紧张,去了后还是紧张了,语无伦次,很没礼貌--(不敢看老师的眼睛) 刚才妈打电话说让我早点回去,不知道为什么,在空荡荡的宿舍里听到妈的声音,眼泪会夺眶 ...
- PHP连接和拆分数组array_combine()和array_slice()用法示例
一提起数组,可能很多PHP初学者会觉得难,但开发一些高级应用的时候,又离不开数组的使用.下面就来说下,PHP使用array_combine()函数来连接数组.用array_slice()函数来拆分数组 ...
- Zepto.js入门介绍
GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...
- TCP实现P2P通信
Internet的迅速发展以及IPv4 地址数量的限制使得网络地址翻译(NAT,Network Address Trans2lation)设备得到广泛应用.NAT设备允许处于同一NAT后的多台主机共享 ...
- 天兔(Lepus)监控系统慢查询分析平台安装配置
被监控端要安装pt工具 [root@HE1~]## yum -y install perl-IO-Socket-SSL [root@HE1~]## yum -y install perl-DBI [r ...