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. HDU-1087-Super Jumping! Jumping! Jumping!（线性DP， 最大上升子列和）

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  2. C#-MVC-★不同层之间的传值方式★

    方式一:form表单提交(一对一传值) 例如: view层代码: action - 数据提交到的服务端(如Home控制器下的Insert动作) method - 提交数据的方式(post或get) n ...

  3. C# 聊一聊屏保的设置

    初步认识屏保 进入屏保设置 强行开头,大家都知道我们只需要在搜索框打入“屏保”,就能进入屏保的设置选项.然而箭头指向的位置到底是在Windows的哪个地方呢?这就是写这篇博客的原因. 进入一个屏幕保护 ...

  4. Mac 10.12安装图片切换工具ArcSoft Photo+

    说明:Mac自带的图片切换不能连续切换,这款工具和美图看看差不多. 下载: (链接: https://pan.baidu.com/s/1i5rLYzr 密码: 49dp)

  5. UI的线程问题：单线程原因及更新UI的四种方式

    1.UI线程为什么设计为单线程? UI控件的操作不是线程安全的,对于多线程并发访问的时候,如果使用加锁机制会导致: UI控件的操作变得很复杂. 加锁的操作必定会导致效率下降. 所以android系统在 ...

  6. IDEA Maven Mybatis generator 自动生成代码

    IDEA Maven Mybatis generator 自动生成代码 一.安装配置maven以及在Idea中配置maven 安装过程步骤可以看上面的博文,里面介绍得很详细. 二.建数据表 DROP ...

  7. @SafeVarargs注解

    被@SafeVarargs注解标注的方法必须是由static或者final修饰的方法. 使用泛型的变长参数方法产生编译器警告的示例: public static <T> T useVara ...

  8. css定位问题的记录

    postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom.兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留.而 ...

  9. Error处理：/bin/bash^M: 坏的解释器: 没有该文件或目录(bad interpreter: No such file or directory)

    在Linux下编译运行脚本的时候出现”/bin/bash^M: 坏的解释器: 没有那个文件或目录(bad interpreter: No such file or directory)“这样的错误. ...

  10. i.mx6 Android5.1.1 servicemanager本地服务

    接在之前的 i.mx6 Android5.1.1 初始化流程之init进程 i.mx6 Android5.1.1 初始化流程之init.rc解析 servicemanager是由init创建的本地服务 ...