按钮标签

在<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. No resource found that matches the given name 'android:Widget.Material.A解决方案

    1:首先新建空白工作区 2:先import appcompat_v7 appcompat_v7在一个类似这样的地方, C:\mywork\android\android-sdk-windows\ext ...

  2. Ubuntu 下配置Ganglia监控

    Ganglia是比较知名的开源监控系统, 运维上需要关注的一些通用的状态都有所涉及.其组成主要是gmond(监控程序),gmetad(信息收集程序),web(监控数据展现app).ubuntu的apt ...

  3. JMS确认机制

    JMS中为数不多的重点就是消息的确认机制,下面分别介绍J2EE和Spring的MessageListenerContainer的确认机制 J2EE中JMS确认机制 在JMS规范中一共4种确认方式 AU ...

  4. 开发人员应该对IIS理论层的知识了解的多一些~第四讲 HttpModule中的几大事件

    返回目录 本文主要介绍HttpModule,它在一个网页请求过程中是一个怎样的过程是我们要知道的,在网页加载过程中HttpModule在何时被执行也是我们要知道的,以及,HttpModule在网页请求 ...

  5. Zabbix安装部署

    zabbix服务器端配置:(10.27.98.29服务器端) 1.安装lamp环境 yum -y install autoconf curl-devel gcc gcc-c++ httpd httpd ...

  6. 常用 sql

    一. sql 多个字段拼接 mysql:     1. concat函数  如果连接串中存在NULL,则返回结果为NULL:        例如: select concat('1','2','3') ...

  7. MYSQL线程池总结(一)

    线程池是Mysql5.6的一个核心功能,对于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导致资源利用率低 ...

  8. Cocos2d-x 3.2 学习笔记（十四）保卫萝卜之界面UI

         保卫萝卜~上一篇说了使用CocoStudio制作主界面,这里来完善主界面动画及后续界面(主题界面ThemeUI.场景选择界面SelectMapUI),主要涉及的控件PageView. 学习要 ...

  9. Ubuntu下安装配置JDK1.7

    1.下载JDK 对于下载方法,可以使用命令,也可以手动下载.本人采用手动下载jdk的方式. 下载jdk-7u7-linux-i586.tar.gz到Ubuntu桌面. 2. 将下载的文件移动到这个文件 ...

  10. 如何在windows 10 x64安装佳能 CP900 驱动

    佳能太无耻,为了销售CP910 , CP900 到win8 ,win8.1,win 10 都没有驱动程序,网上找的方法都不行,IT民工自有办法: 1.按住shift键,重启电脑 restart 2.在 ...