Bootstrap-按钮篇btn
参考网址:http://v3.bootcss.com/(能抄不写)
1、按钮颜色样式:
对应代码:(主要体现在class内容:btn-default,btn-primary...)
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
<a href="#" class="btn btn-primary" role="button">Primary link</a>
2、按钮大小样式
对应代码:(主要体现在class内容:btn-lg,btn-sm,btn-xs...)
<p>
<button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">(默认尺寸)Default button</button>
<button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
3、禁用btn
对应代码:(主要体现在class内容:disabled="disabled" ; disabled)
<button class="btn btn-lg btn-primary" type="button" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
Bootstrap-按钮篇btn的更多相关文章
- Bootstrap 按钮
本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...
- bootstrap按钮组
种类 -a, input , button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...
- bootstrap按钮
按钮 基类 -btn 样式 btn-default(默认) btn-link(链接) 大小 btn-*[lg,sm,xs] 状态 active disabled <!DOCTYPE HTML&g ...
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...
- Bootstrap 按钮分组
Bootstrap 按钮分组: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- bootstrap 按钮 文本 浮动 隐藏
bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Bootstrap按钮插件
前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
- 第二百四十七节,Bootstrap按钮和折叠插件
Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...
随机推荐
- 查看oracle单签session
转自 https://blog.csdn.net/alexsong123/article/details/51858092 怎样查看oracle当前的连接数呢?只需要用下面的SQL语句查询一下就可以了 ...
- mysql导入导出无权限
error:The MySQL server is running with the --secure-file-priv option so it cannot execute this state ...
- 2018年第九届蓝桥杯【C++省赛B组】(未完)
第一题 标题:第几天 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容 利用excel更加快捷: 答案是125 ...
- NIO三大组件简介
NIO简介 NIO 是面向缓冲区(或者说面向块)编程的, 因为Buffer底层本质上就是内存块.数据被读取到一个缓冲区, 稍后再被它处理, 需要时数据可在缓冲区前后移动, 从而增加了处理过程中的灵活性 ...
- Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容
后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...
- 01 DDL(DataDefinitionLanguage)
注: 语句用 ; 或 \g \G 表示结束 . 建库语句 : CREATE DATABASE db_name ; 查询有哪些库 : SHO ...
- Gym 101158D(暴力)
题意:给定两个长度为N的字符串,1<=N<=4000,求满足字符串1中的某个区间所有的字母种类和个数都与字符串2中的某个区间相同最长的区间长度. 分析: 1.预处理每个串字母个数的前缀和. ...
- VLC搭建RTSP服务器的过程
第一步,打开VLC 第二步:在媒体下拉菜单下!有一个子菜单“串流”如图所示: 点击“串流”子菜单 弹出一个窗口!如下图所示. 添加一个你要串流的本地文件,我刚才传给你的那个长一点的文件. 第三步,会出 ...
- Arduino 的读串口与写串口
//准备一下 while(Serial.available()>0) WifiSerial.write(Serial.read()); wh ...
- 13.swoole学习笔记--DNS查询
<?php //执行DNS查询 swoole_async_dns_lookup("www.baidu.com",function($host,$ip){ echo $ip; ...