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. python基础知识梳理----5dict 字典的应用

    内容简介: 1:字典简介 2:字典的增删该查 3:字典嵌套 1: 字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是唯一的. 在保存的时候, 根 ...

  2. C#-WebForm-光棒效果

    <script type="text/javascript"> //获取Repeater的每一行 var oItems = document.getElementsBy ...

  3. docker 暴露2375 端口。

    网上找的.大多不能用...一下是我自己找了半天的方法...,可能是版本太旧的原因 下图解决方法: ubuntu: 18.04 docker: Docker version 18.09.2, build ...

  4. [Alpha]Scrum Meeting#7

    github 本次会议项目由PM召开,时间为4月9日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 整理并发布之前因为清明耽误的博客 撰写每日例会报告 SiMrua 添加暂 ...

  5. Java NIO学习与记录(六): NIO线程模型

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

  6. [意识流]简单易懂的AC自动机

    为了一言不合就徒手敲AC自动机,决定看一下原理 于是花了一张图, 参考HDU2222的样例 于是看懂这张图的你很快就敲出了如下代码并且AC了 #include<bits/stdc++.h> ...

  7. [转] etcd 搭建与使用

    [From] https://blog.csdn.net/ShouTouDeXingFu/article/details/81167302 etcd 1.下载etcd二进制文件包         ht ...

  8. Mac 10.12安装Windows远程桌面工具Microsoft Remote Desktop

    说明:之前Office自带的Windows远程桌面工具虽然简便,但是保存的服务器列表有限.而这个微软推出的自家工具可以完美解决这些问题. 下载: (链接:https://pan.baidu.com/s ...

  9. iterm自动登录ssh脚本

    经常在工作中需要切换到不同的服务器去部署,或者查看日志,每次登录都要去找对应的IP和地址,非常麻烦,最终决定使用iterm2+脚本来实现自动登录. 1.iterm2(下载安装不再介绍http://ww ...

  10. JavaScript设计模式(三) - 策略模式

    什么是策略模式? 策略模式支持在运行时由使用者选择合适的算法,对于使用者而言不用关心背后的具体实现,由使用者自动根据当前程序执行的上下文和配置,从已有的算法列列表中选择出合适的算法来处理当前任务.   ...