参考网址: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. JVM配合IDEA远程调试

    前言 如果测试环境中运行的jar包项目报错,需要排错时,会不太方便,这个时候就可以通过远程调试的方式,在本地打断点的方式进行调试 正文 一.首先,运行测试环境的jar包需要加以下参数: java -j ...

  2. bugku love

    emmm....控制台运行一下 接着查一下是否有壳 显示是没有壳的,接着查看一下结构 也没有什么发现,上ida看一下吧,顺便说一句每个人的解题思路都不一样.面对一开始都不清楚的结构我会选择交叉引用这样 ...

  3. Java笔记--网络编程

    1.IP地址:InetAddress类 --唯一的标识Internet上的计算机 --本地回环地址(hostAddress)127.0.0.1 主机名(hostName):localhost //根据 ...

  4. CLion的使用

    配置远程Linux编译器 实现目标:1.将项目中的源码和target和Linux服务器同步.2.代码在服务器端运行 配置ToolChains setting -> Build,Execution ...

  5. PHP 跨域之header

    之前的博客里记录了PHP解决跨域的方案:JSONP:https://www.cnblogs.com/pawn-i/p/11899120.html 除了jsonp之后,还是通过header函数设置响应头 ...

  6. pig安装配置及实例

    一.前提 1. hadoop集群环境配置好(本人hadoop版本:hadoop-2.7.3) 2. windows基础环境准备: jdk环境配置.esclipse环境配置 二.搭建pig环境 1.下载 ...

  7. Quartus设计FIR滤波器的系数文件格式(适用于FIR II的IP核)

    对常用的FIR,我们使用MATLAB的fdatool(或者filterDesigner) 设计滤波器,给定指标,生成系数.为了方便,我们将系数保存到文件,其保存格式比较简介,在此进行说明. 1.FIR ...

  8. ucosiii 移植

    最近想在 f429 上面使用 mdk526 版本的 IDE,配合 HAL 和ucosiii.考虑到的方法是对比 v7 开发板的 ucosiii 和裸机程序,找出需要修改的地方,然后对比 v6 开发板的 ...

  9. NIO组件Channel

    基本介绍 NIO的通道类似于流, 但有些区别: 通道可以同时进行读写, 而流只能读或者只能写 通道可以实现异步读写数据 通道可以从缓冲区(Buffer)读数据, 也可以写数据到缓冲区 BIO中的str ...

  10. 实验吧-web-Guess Next Session(session简介)

    看代码: <?php session_start(); if (isset ($_GET['password'])) { if ($_GET['password'] == $_SESSION[' ...