<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 按钮大小</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</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>

<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>

</body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮大小的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：激活状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个超小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个大按钮

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 【MySQL】存储引擎

    " 目录 #. MySQL支持的存储引擎 1. InnoDB 2. MyISAM 3. NDB 4. Memory 5. Infobright 6. NTSE 7. BLACKHOLE My ...

  2. 传奇GOM引擎授权过期解决方法.

    传奇GOM引擎授权过期解决方法 下载最新的GOM引擎,将里面的Key.Lic文件找出来,替换掉授权过期的版本,如果你本身是免费版最好是找同样的免费版的来覆盖. 如果你本身是免费版,但是却用的是商业版K ...

  3. 机器学习 — 从mnist数据集谈起

    做了一些简单机器学习任务后,发现必须要对数据集有足够的了解才能动手做一些事,这是无法避免的,否则可能连在干嘛都不知道,而一些官方例程并不会对数据集做过多解释,你甚至连它长什么样都不知道... 以skl ...

  4. rapidxml读xml文件

    student.xml文件内容: int readXML(void) { rapidxml::file<> file("student.xml"); rapidxml: ...

  5. Try-Catch无法正确定位异常位置，我推荐2个有效技巧

    宇宙第一开发IDE Visual Studio的调试功能非常强大,平常工作debug帮助我们解决不少问题.今天分享两个异常捕获的技巧,希望能够帮助解决一些问题. 以下两种情况,我相信大家都会遇到过. ...

  6. C：clock() 计算代码执行时间

    clock():捕捉从程序开始运行到clock()被调用时所耗费的事件. 这个时间的单位是 clock tick,即时钟打点 常数 CLK_TCK:机器时钟每秒走的时钟打点数 要使用这个函数需要包含头 ...

  7. python-opencv：读取图片

    代码 import cv2 # 读取一张图片 src = cv2.imread("../images/lena.jpg") # 命名一个窗口 cv2.namedWindow(&qu ...

  8. Java面向对象编程 -1.3

    类与对象的定义与使用 在Java之中类是一个独立的结构体,所以需要使用class来进行定义,而类之中主要由属性和方法所组成,那么属性就是一个个具体的变量,方法就是可以重复执行的代码. 定义一个类 cl ...

  9. Java 石家庄铁道大学软件工程系 学生学籍管理系统 2019 版

    本系统的作用是简单实现一些学生成绩管理操作:录入,修改,绩点计算,以及系统退出等. 首先建一个主函数实现界面的实现,然后建一个数据类用来定义存放数据.之后建立一个工具类,用来实现所有要进行的操作.首先 ...

  10. jquery中 $(xxx).each() 和 $.each()的区别，以及enter键一键登录

    1.$().each 在dom处理上面用的较多.如果页面有多个input标签类型为text,对于这时用$().each来处理多个text,例如: $("input[type=’text’]& ...