按钮标签

在<a>,<button>或input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用<button>标签。

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

      <meta charset="utf-8">

      <!-- 引入 Bootstrap -->

      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   </head>

   <body>

          <!--记录不同的标签使用bootstrap的btn类-->

      <a class="btn btn-default" href="#" role="button">链接</a>

	  <button class="btn btn-default" type="submit">按钮</button>

	  <input class="btn btn-default" type="button" value="输入">

	  <input class="btn btn-default" type="submit" value="提交">

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

      <!-- 包括所有已编译的插件 -->

      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   </body>

</html>

感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用btnclass。

可以使用在以上标签的样式

基本样式

  • btn 为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。

颜色

  • btn-default默认的按钮样式，就是白底黑字灰框，要跟btn联合使用，下同
  • btn-primary 原始的按钮样式，蓝底白字
  • btn-success 成功的样式，绿底白字
  • btn-info表示点击后会弹出信息，淡蓝色底白字
  • btn-warning 表示需要谨慎操作的按钮，黄底白字
  • btn-danger表示危险的操作，红底白字
  • btn-link让按钮看起来像一个连接，仍然保持按钮的行为

大小

  • btn-lg 比普通的图标要大的大图标
  • btn-sm 小图标
  • btn-xs 超小图标
  • btn-block 块级按钮，拉伸至父元素100%的宽度

按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。

状态

  • active 表示按钮被激活，按钮会比普通的按钮宽一些
  • disabled disabled属性和disabled类都能将按钮禁用，两者效果相同。对于link，用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式
	  <!--应用了disabled类的只是禁用了连接-->

      <a class="btn btn-danger disabled"  role="button" href="#">应用disabled类</a>

	  <!--使用了disabled属性则禁用了整个按钮-->

	  <a class="btn btn-danger"  role="button" disabled="disabled" href="#">应用disabled标签</a>

	  <button class="btn btn-default btn-danger disabled"  type="submit">按钮</button>

bootstrap学习笔记系列4------bootstrap按钮的更多相关文章

  1. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  2. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  3. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  4. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  5. bootstrap 学习笔记（4）---- 按钮

    平常我们自己写按钮,这次不用我们自己写 了,直接应用bootstrap中的按钮样式,就能设计出很漂亮的按钮样式.接下来就让我们一起学习吧. 1.可以作为按钮使用的标签或元素:<a>< ...

  6. Bootstrap学习笔记系列5------Bootstrap图片显示

    通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...

  7. Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

    背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...

  8. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  9. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

随机推荐

  1. java算法（一）

    最近在看各种经典算法,自己写起来: 一.判断素数问题: 知识点:素数即为质数,一个数n若不是质数则一定在2-n/2之间内有因数. package JingDian; public class sush ...

  2. 从点击Button到弹出一个MessageBox， 背后发生了什么

    思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背后究 ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. 【团队分享之二】IT团队绩效提升的一些见解

  5. Atitit.编译原理与概论

    Atitit.编译原理与概论 编译原理 词法分析 Ast构建,语法分析 语意分析 6 数据结构  1. ▪ 记号 2. ▪ 语法树 3. ▪ 符号表 4. ▪ 常数表 5. ▪ 中间代码 1. ▪ 临 ...

  6. IDE：Eclipse查看Servlet源码

    一.源码下载 1.打开tomcat官网:http://tomcat.apache.org/    , 点击右侧下载菜单(以tomcat-7为例)进入下载页面:http://tomcat.apache. ...

  7. Ubuntu14.04安装pip及配置

    安装pip: wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate sudo python get-pip.py 建立软连接 ...

  8. ListView优化为何ViewHolder用static类（转载）

    如果有人还不了解ViewHolder为什么可以起到优化作用,我这边再做下简单说明:Android的findViewById动作是比较耗时的,需要遍历布局的树形结构,才能找到相应的视图.所以如果想在这一 ...

  9. Vertex and Fragment Shader

    Semantics语义词: 定义:GPU工作时,数据通常暂存在寄存器,那么在Cg中,语义词就指定了输入/输出数据和图形硬件寄存器之间的映射关系. 原理:根据输入语义,图形处理器从某个寄存器取数据:然后 ...

  10. python--基础学习（四）自然字符串、重复字符串、子字符串

    python系列均基于python3.4环境 1.自然字符串和重复字符串 代码示例: str1=r'hello \npython' str2='hello \npython' str3="h ...