按钮标签

在<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. 渣渣小本求职复习之路每天一博客系列——数据库基础（MySQL）（5）

    前情回顾:昨天学习了MySQL中索引的设计与使用,还了解了一些常见的SQL注入攻击的手段以及防范方法,一般来说,在面试的时候如果不是要求比较高,基本就够用了. 今天碰见一个拿了TP-LINK的offe ...

  2. Yii Model中添加默认搜索条件

    在查询中增加条件 public function defaultScope() { return array( 'condition' => " is_deleted = 0" ...

  3. Memcache分布式部署方案

    基础环境 其实基于PHP扩展的Memcache客户端实际上早已经实现,而且非常稳定.先解释一些名词,Memcache是danga.com的一个开源项目,可以类比于MySQL这样的服务,而PHP扩展的M ...

  4. Excel快速改变行列的次序

    改变行列次序是在Excel中常常需要进行的操作,多数用户的方法是先剪切要调整的行或列,然后选定目标位置,单击菜单“插入”→“剪切单元格”.   事实上,使用键盘来配合的话,改变行列的次序可以更快捷.比 ...

  5. Atitti 跨语言异常的转换抛出 java js

    Atitti 跨语言异常的转换抛出 java js 异常的转换,直接反序列化为json对象e对象即可.. Js.没有完整的e机制,可以参考java的实现一个stack层次机制的e对象即可.. 抛出Ru ...

  6. iOS----------使用 Xcode6或Xcode7配置.pch文件

    刚上手 Xcode6/Xcode7 的人,总会发现之前在 6 之前常常会在“利用名-Prefix.pch”这个文件中来配置我们全局要用到的头文件,但是 xcode6 没有了,人家说,这类东西有时候也会 ...

  7. django获取指定列的数据

    django获取指定列的数据 model一般都是有多个属性的,但是很多时候我们又只需要查询特定的某一个,这个时候可以用到values和values_list [values()](https://do ...

  8. Distribution of Data Through OCAF Tree

    Distribution of Data Through OCAF Tree OCAF数据的分配 eryar@163.com 一.作者注 Annotation 本文档主要用于说明OCAF(Open C ...

  9. OpenCascade Shape Representation in OpenSceneGraph

    OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...

  10. Yii2的深入学习--入口文件

    前一段时间,尝试去写一个 php 的简单框架,发现自己还欠缺很多,就暂时停掉了.准备先读完 Yii2 的源码,然后再去看完 laravel 的源码,最后再继续去写这个简单的 php 框架. 之后关于 ...