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. SAE实践——创建简单留言板

    1. 创建数据库 将mysaeapptest的数据库初始化之后,建立新的数据库,在PHPMyAdmin输入下列SQL. CREATE TABLE IF NOT EXISTS `ny_diary` ( ...

  2. OO第二单元の小结

    第二单元(线程与电梯问题)总结博客 三次作业的设计策略 第一次:本次作业只有一部电梯,而且不用捎带.因此,我一共设计了两个线程:一个负责管理输入,一个负责电梯运行.同时,我将调度队列设置为单例模式,里 ...

  3. ES6之新增let命令使用方法

    let命令的用法 let是es6中的声明一个变量的命令,只在它声明的代码块中有效,出了这个代码块就会报错.也非常适合for循环,在循环中i的值只在循环语句中生效,在外边取不到的. var命令声明的是一 ...

  4. Log中关于zVideoApp与zChatApp之间的消息传递可以搜索以下字符串

    [CSSBConfIPCAgent::OnMessageReceived]  (这是zVideoApp端的) 和 [CSSBPTIPCListener::OnMessageReceived]      ...

  5. 新手入门贴之基于 python 语言的接口自动化 demo 小实战

    大家好,我是正在学习接口测试的菜鸟.近期通过自己的学习,完成了一个关于测试接口的接口自动化demo.下面想跟大家分享一下,主要的思路是根据接口文档确定测试用例,并将测试用例写在excel中.因为只是小 ...

  6. shortcut&website

    作者:Vincent链接:https://www.zhihu.com/question/28993252/answer/61618961来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  7. 洛谷P2523 [HAOI2011]Problem c(计数dp)

    题面 luogu 题解 首先,显然一个人实际位置只可能大于或等于编号 先考虑无解的情况 对于编号为\(i\),如果确认的人编号在\([i,n]\)中数量大于区间长度,那么就无解 记\(S[i]\)表示 ...

  8. CF917D. Stranger Trees & TopCoder13369. TreeDistance（变元矩阵树定理＋高斯消元）

    题目链接 CF917D:https://codeforces.com/problemset/problem/917/D TopCoder13369:https://community.topcoder ...

  9. Unity3D实现随机播放背景音频

    1.先在第一人称下新建空白物体,命名“audio” 2.在audio中加入Audio Source 3.在第一人称组件里添加Audio Liistener和Audio脚本 4.脚本中添加代码 usin ...

  10. Python+USB+Vnet+FTP传输文件开发记录

    做一个Python+USB+Vnet+FTP传输文件开发记录