一按钮的基本样式

Bootstrap提供一组标准的按钮配色和大小调整方案，只需要简单的应用的按钮类即可。BootStrap3提供了按钮的标准样式如图。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    </head>

    <body>
        <!- 表示标准的按钮样式 ->

        <button type="button" class="btn btn-default" >默认</button>

        
        <!- 表示主要的按钮样式 ->

        <button type="button" class="btn btn-primary" >主要</button>


        <!- 表示成功的按钮样式 ->

        <button type="button" class="btn btn-success" >成功</button>

    
        <!- 表示信息的按钮样式 ->

        <button type="button" class="btn btn-info" >信息</button>


        <!- 表示警告的按钮样式 ->

        <button type="button" class="btn btn-warning" >警告</button>


        <!- 表示危险的按钮样式 ->

        <button type="button" class="btn btn-danger" >危险</button>


        <!- 使它看起来想一个链接，同事保持按钮的行为 ->

        <button type="button" class="btn btn-link" >Link</button>

        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    </body>

</html>

按钮类的总结参见表

意义	按钮类	颜色和样式
标准按钮	btn btn-default	白色
主要按钮	btn btn-pri	深蓝色
成功按钮	btn btn-success	绿色
消息按钮	btn btn-info	浅蓝色
警告按钮	btn btn-warning	橙黄色
危险操作按钮	btn btn-danger	红色
链接按钮	btn btn-link	和链接的样式一样

注意：按钮类不经可以用于<button>标签，还可以用于<a> 或 <input>标签，它们的样式表现是一致的，不过出于浏览器表现一致性的考虑，Bootstrap推荐使用<button>标签。

二调节按钮大小

　　Bootstrap还提供了 .btn-lg, .btn-sm, .btn-xs 3个类对按钮的大小进行标准化的调节。下面代码分别显示了大按钮(.btn-lg) , 标准按钮，小按钮(.btn-sm)，超小按钮(.btn-xs).

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    </head>

    <body>

        <p>

            <button type="button" class="btn btn-primary btn-lg" >大号按钮</button>

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

        </p>

        <p>

            <button type="button" class="btn btn-primary" >默认按钮</button>

            <button type="button" class="btn btn-default" >默认按钮</button>

        </p>        

        <p>

            <button type="button" class="btn btn-primary btn-sm" >小号按钮</button>

            <button type="button" class="btn btn-default btn-sm" >小号按钮</button>

        </p>        

        <p>

            <button type="button" class="btn btn-primary btn-xs" >超小按钮</button>

            <button type="button" class="btn btn-default btn-xs" >超小按钮</button>

        </p>            

        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    </body>

</html>

三块状按钮

<button>, <a> 标签默认都是内联元素，对于移动端来说，一个占据一整行的大按钮非常常见，这中情况使用 .btn-block类。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    </head>

    <body>

        <p>

            <button type="button" class="btn btn-primary btn-lg btn-block" >此按钮为块级元素</button>

            <button type="button" class="btn btn-default btn-lg btn-block"  >此按钮为块级元素</button>

        </p>

        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    </body>

</html>

4 为按钮设置不可点击样式

　　Bootstrap通过将按钮的背景色做 50%的褪色处理以呈现出无法点击的效果。只需要为按钮添加 disabled属性。代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    </head>

    <body>

        <p>

            <button type="button" class="btn btn-lg btn-primary disabled" >主要按钮</button>

            <button type="button" class="btn btn-default btn-lg disabled"  >链接</button>

        </p>

        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    </body>

</html>

对于装成按钮样式的<a>标签，则需要添加.dsabled类。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    </head>

    <body>

        <p>

            <a href="#" class="btn btn-lg btn-primary disabled" >主要链接</a>

            <a href="#" class="btn btn-lg btn-primary disabled" >链接</a>

        </p>

        <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>

        <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    </body>

</html>

注意：

<a>标签加了 .disabled类后只是样式发生了变化，点击后任然可以正常工作，所以一般情况下可以使用JavaScript来进行<a> 标签的禁用。

bootstrap学习总结-06 按钮的更多相关文章

bootstrap学习笔记细化(按钮)
button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...
bootstrap学习笔记(菜单.按钮)
下拉菜单 <div class="dropdown"> <button class="btn btn-default dropdown-toggle&q ...
Bootstrap 学习笔记11 按钮和折叠插件
复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...
BootStrap学习(2)_下拉菜单&按钮组
一.下拉菜单 1.基本下拉菜单如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <ht ...
Bootstrap学习（3）
Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...
BootStrap学习（2）
使用Bootstrap添加代码框可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
Bootstrap 学习（1）
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...

随机推荐

堡垒机环境-jumpserver部署
1:安装数据库这里是提前安装,也可以不安装,在安装jumpserver主程序的时候,他会询问你是否安装 yum -y install ncurses-devel cmake echo 'export ...
mac基本用法
1.屏幕截图 command + shift + 4 2.切换到桌面 command + f3 3.右击双支轻拍 4.彻底退出窗口 command + q 5.关闭窗口 cmd + w 6.隐藏窗口 ...
C# winform 上传文件到服务器
1.首先要在服务器端新建一个网站axpx页然后再网站的后台写代码获取winform传过来的文件名. 声明:这个方法虽然最简单最省事,但是上传大文件可能会报错,我的机器是10M, 超过10M就会提示报 ...
SVM+HOG特征训练分类器
#1,概念在机器学习领域,支持向量机SVM(Support Vector Machine)是一个有监督的学习模型,通常用来进行模式识别.分类.以及回归分析. SVM的主要思想可以概括为两点:⑴它是针 ...
HTTP协议简介2
几个相关的知识点: 客户端发送请求时,请求类型为GET与POST的主要差别是什么? 1.请求类型不同,一个为GET,一个为POST 2.当请求类型为GET时,请求的数据以参数的形式添加到url的后面, ...
caffe windows学习：第一个测试程序
caffe windows编译成功后,就可以开始进行测试了.如果还没有编译成功的,请参考:caffe windows 学习第一步:编译和安装(vs2012+win 64) 一般第一个测试都是建议对手写 ...
listview向下滑动过程中背景色变成黑色和一些奇怪问题
ListView是一个经常要用到的android控件,现总结遇到过的一些美化的小细节. 1.listview在拖动的时候背景图片消失变成黑色背景,等到拖动完毕我们自己的背景图片才显示出来这个问题是我 ...
Jenkins进阶系列之——14配置Jenkins用户和权限
今天给大家说说使用Jenkins专有用户数据库的配置,和一些常用的权限配置. 配置用户注册在已运行的Jenkins主页中,点击左侧的系统管理—>Configure Global Securit ...
unity3d 扩展NGUI —— 限制UI点击响应间隔
当某个按钮按下后给服务器发送某条消息如果玩家短时间内疯狂点击按钮很多次,这将会给服务器发送很多条无用数据不但增加了服务器的压力,发送数据还浪费流量,甚至可能引发一些莫名其妙的bug 所以,限制UI ...
服务器端解决JS跨域调用问题
一. 使用JSONp方式调用不做详细讲解,可以参考jq文档二. 服务端配置修改Web.config 文件 <system.webServer> <modules runAllM ...

bootstrap学习总结-06 按钮