参考网址: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的更多相关文章

  1. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  2. bootstrap按钮组

    种类 -a,   input ,   button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...

  3. bootstrap按钮

    按钮 基类 -btn 样式 btn-default(默认) btn-link(链接) 大小 btn-*[lg,sm,xs] 状态 active disabled <!DOCTYPE HTML&g ...

  4. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  5. Bootstrap 按钮分组

    Bootstrap 按钮分组: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. bootstrap 按钮 文本 浮动 隐藏

    bootstrap 按钮 文本 浮动 隐藏 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  8. Bootstrap -- 按钮样式与使用

    Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...

  9. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  10. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

随机推荐

  1. 查看oracle单签session

    转自 https://blog.csdn.net/alexsong123/article/details/51858092 怎样查看oracle当前的连接数呢?只需要用下面的SQL语句查询一下就可以了 ...

  2. mysql导入导出无权限

    error:The MySQL server is running with the --secure-file-priv option so it cannot execute this state ...

  3. 2018年第九届蓝桥杯【C++省赛B组】(未完)

    第一题 标题:第几天 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容 利用excel更加快捷: 答案是125 ...

  4. NIO三大组件简介

    NIO简介 NIO 是面向缓冲区(或者说面向块)编程的, 因为Buffer底层本质上就是内存块.数据被读取到一个缓冲区, 稍后再被它处理, 需要时数据可在缓冲区前后移动, 从而增加了处理过程中的灵活性 ...

  5. Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...

  6. 01 DDL(DataDefinitionLanguage)

    注: 语句用 ; 或 \g \G 表示结束 .       建库语句 :         CREATE DATABASE db_name ;          查询有哪些库 :         SHO ...

  7. Gym 101158D(暴力)

    题意:给定两个长度为N的字符串,1<=N<=4000,求满足字符串1中的某个区间所有的字母种类和个数都与字符串2中的某个区间相同最长的区间长度. 分析: 1.预处理每个串字母个数的前缀和. ...

  8. VLC搭建RTSP服务器的过程

    第一步,打开VLC 第二步:在媒体下拉菜单下!有一个子菜单“串流”如图所示: 点击“串流”子菜单 弹出一个窗口!如下图所示. 添加一个你要串流的本地文件,我刚才传给你的那个长一点的文件. 第三步,会出 ...

  9. Arduino 的读串口与写串口

    //准备一下             while(Serial.available()>0)        WifiSerial.write(Serial.read());         wh ...

  10. 13.swoole学习笔记--DNS查询

    <?php //执行DNS查询 swoole_async_dns_lookup("www.baidu.com",function($host,$ip){ echo $ip; ...