<!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. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  2. Java 多线程学习笔记（一）

    一.进程和线程 (1)进程概念的引入 为了能使程序并发执行,并且可以对并发执行的程序加以描述和控制,人们引入了“进程”的概念.---摘之计算机操作系统(第四版)汤小丹编著 (2)进程概念 进程(Pro ...

  3. Python中注释与声明

    Python中注释的写法 #:使用井号进行单行注释 Python中貌似没有提供多行注释,不过我们可以利用三引号的多行字符串来进行多行注释 """ 多行注释内容 多行注释内 ...

  4. :after/::after和:before/::before的异同

    相同点 都可以用来表示伪类对象,用来设置对象前的内容:before和::before写法是等效的; :after和::after写法是等效的不同点 :before/:after是Css2的写法,::b ...

  5. 重新梳理IT知识之java-01语法（一）

    标识符的命名规范 包名:xxxyyyzzz 类名.接口名:XxxYyyZzz (大驼峰) 变量名.方法名:xxxYyyZzz 常量名:XXX_YYY_ZZZ //**************强制类型转 ...

  6. Laravel Vuejs 实战：开发知乎 （1）项目环境配置和用户表设计

    1.使用laragon新建laravel项目 zhihu 2.配置env文件的database设置 DB_DATABASE=zhihu 3.分析users表需要的字段 4.修改数据库迁移文件: cla ...

  7. 线程池三种队列使用,SynchronousQueue,LinkedBlockingQueue,ArrayBlockingQueue

    使用方法: private static ExecutorService cachedThreadPool = new ThreadPoolExecutor(4, Runtime.getRuntime ...

  8. 数字反转(0)<P2011_1>

    数字反转  (reverse.cpp/c/pas) [问题描述] 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形 式,即除非给定的原数为零,否则反转后得到的新数的最高位数 ...

  9. Scrapy 分布式爬取

    由于受到计算机能力和网络带宽的限制,单台计算机运行的爬虫咋爬取数据量较大时,需要耗费很长时间.分布式爬取的思想是“人多力量大”,在网络中的多台计算机同时运行程序,公童完成一个大型爬取任务, Scrap ...

  10. Mybatis的逆向工程以及Example的实例函数及详解

    Mybatis-generator是Mybatis的逆向工程  (根据数据库中的表生成java代码) Mybatis的逆向工程会生成实例及实例对应的example,example用于添加条件,相当于w ...