button:btn 圆角灰色按钮

button:btn btn-default 圆角灰色边框按钮

button:btn btn-success 绿色

button:btn btn-primary 蓝色

button:btn btn-info 浅蓝

button:btn btn-warning 黄色

button:btn btn-danger 红色

button:btn btn-link 链接按钮改

btn-lg,btn-sm 按钮变大，变小

active 按下状态

btn-block 撑满父级，全屏

属性：disabled="disabled"

禁用按钮 把链接变成按钮 <a class="btn btn-danger" href="">这是</a>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表单2</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>

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

            <button class="btn btn-success btn-sm" >按钮</button>

            <button class="btn btn-info active" >按钮</button>

            <button class="btn btn-danger btn-block">按钮</button>

            <button class="btn btn-link disabled ="disabled">按钮</button>

            <a class="btn btn-danger" href="">hhh</a>

            <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

            <script type="text/javascript" src="js/bootstrap.min.js" ></script>

    </body>

</html>

源码

效果图片：

　　　　

bootstrap学习笔记细化(按钮)的更多相关文章

  1. bootstrap学习笔记细化(表格)

    主要属性: 全屏宽度带水平线的表格 .table 带边框的表格 .table-bordered 条纹状表格 .table-striped 悬停变色表格 .table-hover 紧凑风格表格 .tab ...

  2. bootstrap学习笔记细化(表单)

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  3. bootstrap学习笔记细化(标题)

    bootstrap中的排版: 标题(h1~h6/.h1~.h6) h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px; 副标题(small) 小练习(标题大 ...

  4. bootstrap学习笔记(菜单.按钮)

    下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle&q ...

  5. Bootstrap 学习笔记11 按钮和折叠插件

     复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...

  6. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  7. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. mysql随机取出若干条记录的实用方法

    1.常见的方法 ; 这种方法可以随机取得数据,但是如果表比较大,数据量很多的时候会很耗时. 2.优化后的方式 ) as t ); 分析,首先根据条件筛选出要选的数据,然后随机排序取出要的条数的id , ...

  2. Java文件字节流和字符流

    输入流:只能从中读取数据,不能向其写入数据. InputStream,Reader 输出流:只能向其中写入数据,不能从中读取数据. OutputStream, Writer 输入流是相对于程序而言,外 ...

  3. 如何使用Node爬虫利器Puppteer进行自动化测试

    文:华为云DevCloud 乐少 1.背景 1.1 前端自动化测试较少 前端浏览器众多导致页面兼容性问题比较多,另外界面变化比较快,一个月内可能页面改版两三次,这样导致对前端自动化测试较少,大家也不是 ...

  4. mac安装gdb调试（转载）

    转载自:http://blog.plotcup.com/a/129 最近一直用go写一个项目,本想在mac上用gdb调试一下,但xcode4.6带的gdb版 本还是太低了,不支持go,只好自己安装一个 ...

  5. SpringBoot + Scala环境部署

    在pom.xml文件中添加: <dependencies>中 <!-- 添加Scala依赖 --> <dependency> <groupId>org. ...

  6. VUE源代码调试方法

    前两条出自: https://link.zhihu.com/?target=http%3A//www.orzzone.com/vuejs-project-debug.html https://www. ...

  7. Java NIO学习与记录（六）： NIO线程模型

    NIO线程模型 上一篇说的是基于操作系统的IO处理模型,那么这一篇来介绍下服务器端基于IO模型和自身线程的处理方式. 一.传统阻塞IO模型下的线程处理模式 这种处理模型是基于阻塞IO进行的,上一篇讲过 ...

  8. python实现计算器功能

    import re def strip_operate(exp): # 合并多余的操作符 exp = exp.replace("+-", "-") exp = ...

  9. css变量的应用

    微软在2017年3月份宣布 Edge 浏览器将支持 CSS 变量,到现在已经过去一年多了,哈哈,是不是有点后知后觉? 这个知识点是在阮一峰的日志上浏览到的,在此借用一下了..跟大家分享一下..... ...

  10. Mac系统升级至OS X Mavericks后Genymotion出现的问题及解决方法

    Apple的系统升级终于免费了,可开心满满地升级到OS X Mavericks后,Android模拟器之王Genymotion罢工了.遇到两个问题:1. Unable to load VirtualB ...