普通按钮

代码:

    <div style="margin-bottom:15px">
<a href="#" class="">a标签</a>
</div>
<div style="margin-bottom:15px">
<button class="">button标签</button>
</div>
<div style="margin-bottom:15px">
<input type="button" class="" value="input标签"/>
</div>

此时class属性为空效果:

给每个标签的Class加上“btn”后效果如下:

BootStrap按钮的其他样式:

显示小图标:

    <div style="margin-bottom:15px">
<a href="#" class="btn"><i class="icon-align-left"></i> a标签</a>
</div>
<div style="margin-bottom:15px">
<button class="btn"><i class="icon-arrow-left"></i>button标签</button>
</div>
<div style="margin-bottom:15px">
<input type="button" class="btn" value="input标签"/>
</div>

按钮的群组

代码1:

    <div class="btn-group">
<button class="btn">首页</button>
<button class="btn">上一页</button>
<button class="btn">下一页</button>
<button class="btn">尾页</button>
</div>

只需在按钮外部添加一个class=“btn-group”的div标签即可

代码2:

    <div class="btn-toolbar">
<div class="btn-group">
<button class="btn">首页</button>
<button class="btn">上一页</button>
<button class="btn">下一页</button>
<button class="btn">尾页</button>
</div>
<div class="btn-group">
<button class="btn">首页</button>
<button class="btn">上一页</button>
<button class="btn">下一页</button>
<button class="btn">尾页</button>
</div>
</div>

在两组按钮群外部添加一个class=“btn-toolbar”的div标签

带下拉菜单的按钮

代码:

        <div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" >字体<span class="caret"></span></a>
<ul class="dropdown-menu dropup">
<li><a href="#">黑体</a></li>
<li><a href="#">宋体</a></li>
<li><a href="#">百度综艺</a></li>
</ul>
</div>

效果:

BootStrap2学习日记13----关于按钮的更多相关文章

  1. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  2. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  3. BootStrap2学习日记23---图片轮播

    <div id="carousel1" class="carousel slide"> <div class="carousel-i ...

  4. BootStrap2学习日记22---点击展开

    先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...

  5. BootStrap2学习日记21---消息提示

    <p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...

  6. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  7. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  8. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  9. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

随机推荐

  1. oc_转_NSInteger 和 NSNumber

    Objective-C 支持的类型有两种:基本类型和类. 基本类型,如同 C 语言中的 int 类型一样,拿来就可以直接用.而类在使用时,必须先创建一个对象,再为对象分配空间,接着做初始化和赋值.类的 ...

  2. OpenJDK与JDK的区别及Ubuntu下的安装方法

    OpenJDK与JDK的区别: OpenJDK是JDK的开放原始码版本,以GPL协议的形式放出.两者的授权协议的不同,且在采用GPL协议的OpenJDK中,SUNJDK的一部分源代码因为产权的问题无法 ...

  3. Directory.GetCurrentDirectory

    1.一个应用程序中,Directory.GetCurrentDirectory获得的当前工作目录是C:\Windows\System32,这是为什么呢?是如何设置的? 2.在WinXP下:System ...

  4. windows防火墙无法启动,服务不存在

    系统的防火墙无法启动,系统服务里面也没有防火墙的服务,用下面第一种方法,导 入注册表,重启服务器,在服务里面有防火墙的服务了,然后启动就好了,需要重新配置防火墙 在控制面板中启动防火墙的时候提示无法识 ...

  5. memcache和memcahced区别

    在写这篇文章之前一直对memcache .memcahced模糊,相差一个字母,特此总结下: Memcache是什么? Memcache是一个自由和开放源代码.高性能.分配的内存对象缓存系统.用于加速 ...

  6. struts2+Hibernate4+spring3+EasyUI环境搭建之一:准备工作

    SSHE环境搭建第一步:安装软件(经验:安装软件路径最好不要有空格.括弧.中文等特殊符号)1.Jdk72.tomcat73.maven34.MyEclipse10.7 破解及优化设置(设置本地安装jd ...

  7. Oracle 表数据去重

    Oracle数据库中重复数据怎么去除?使用数据表的时候经常会出现重复的数据,那么要怎么删除呢?下面我们就来说一说去除Oracle数据库重复数据的问题.今天我们要说的有两种方法. 一.根据rowid来去 ...

  8. CodeForces 689E Mike and Geometry Problem (离散化+组合数)

    Mike and Geometry Problem 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/I Description M ...

  9. jdk自带发布webservice服务

    1.创建要发布的类 package com.test.webserive; import javax.jws.WebService; //targetNamespace定义命名空间 @WebServi ...

  10. BestCoder Round #73 (div.2)(hdu 5630)

    Rikka with Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...