参考网址: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. PE文件中找导出表

    导出表: typedef struct _IMAGE_EXPORT_DIRECTORY { DWORD Characteristics; // 未使用,总为0 DWORD TimeDateStamp; ...

  2. firewalld学习--service

    service是firewalld中另外一个非常重要的概念.还是拿门卫的例子来解释. 在iptables的时代我们给门卫下达规则时需要告诉他“所有到22号楼的人全部予以放行”.“所有到80号楼的人全部 ...

  3. docker 为镜像添加ssh服务-docker commit命令创建

    环境centos7 一.准备工作 docker pull ubuntu:18.04 docker run -it ubuntu:18.04 bash 二.配置软件源apt-get update,如果系 ...

  4. springboot自定义属性文件与bean映射注入属性值

    主要有几点: 一.导入依赖 springboot的包和: <dependency> <groupId>org.springframework.boot</groupId& ...

  5. 关于dom树

    当用户访问ip地址,比如 ==www. aa .com/bb/cc/dd.html== 正常情况下是访问一个叫aa.com的服务器里的bb文件夹里的cc文件夹里的dd.html这个文件(其实很多情况都 ...

  6. 008、Java中变量与常量的区别

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  7. face_recognition实时人脸识别

    具体安装移步:https://www.cnblogs.com/ckAng/p/10981025.html 更多操作移步:https://github.com/ageitgey/face_recogni ...

  8. poj 1027 Ignatius and the Princess II全排列

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  9. chrome常用参数

    chrome禁止本地浏览时加载本地其他文件,可以采用添加启动参数的方式来支持 添加参数为 --allow-file-access-from-files 或者 --disable-web-securit ...

  10. Ubuntu上安装tftp服务

    1. 安装 sudo apt install tftpd-hpa 2.设置工作目录 mkdir ~/tftpdroot tftpdroot 3.修改配置文件 sudo vi /etc/default/ ...