<!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. Steam 游戏 《Sudoku Universe（数独宇宙）》、《Sudoku Killer（数独杀手）》、《Sudoku Jigsaw（数独拼图）》数字位置解析 ---------C# 数独程序解析（2020年寒假小目标11）

    日期:2020.02.11 博客期:151 星期二 今天,准备肝一个 C# 的数独读写工具(汇编语言也在努力学习命令方法中...),这三个游戏我早就买下了,一直放在 Steam 库里积灰,看着它的成就 ...

  2. redis的使用1

    学Linux已经将近一个月了,Linux中讲到的redis的使用,到现在还不回具体的使用在php中,今天周末,于是想把redis的使用搞懂. 网上的资料不算多,但还需要硬着头皮学.其中找到这样一篇关于 ...

  3. Python：函数基础

    概念 一段代码,集中到一起,起一个名字,下一次可以使用这个名字调用这个代码块,就是函数的功能 作用: 方便代码的重用 分解任务,简化程序逻辑 使代码更加模块化 函数的分类 内建函数 第三方函数 自定义 ...

  4. PowerDesigner每点击一次就会提示打印错误对话框

    把服务启用了就好了: 重启软件

  5. Springboot学习：核心配置文件

    核心配置文件介绍 SpringBoot使用一个全局配置文件,配置文件名是固定的 application.properties application.yml 配置文件的作用:修改SpringBoot自 ...

  6. Spring Boot 使用 CXF 调用 WebService 服务

    上一张我们讲到 Spring Boot 开发 WebService 服务,本章研究基于 CXF 调用 WebService.另外本来想写一篇 xfire 作为 client 端来调用 webservi ...

  7. idea开发web项目${pageContext.request.contextPath}无法转义

    web-app版本问题,我的web.xml中头文件的配置是: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web ...

  8. Nexus-VDC（Virtual Device Context）

    VDC实际上是将一台物理的Nexus7K设备虚拟为多个逻辑的VDC设备,该术语叫做VDC(Virtual Device Context),该虚拟技术实际上是在一个物理设备架构和内核上运行多个VDC,已 ...

  9. lora

    Lora:特点 距离远,功耗低,不用sim卡和流量,秒级实时性,每秒几十kbps. 阿里与lora: 之前LoRa芯片只有Semtech一家企业掌握着LoRa芯片命脉,人们担心LoRa芯片不够丰富不能 ...

  10. rtt之通用bootloader

    目前只支持F1/F4;使用步骤 1 在官网注册产品,根据系列设定参数,接收邮箱,点击生成就可以在自己的邮箱中收到对应的bootloader.bin文件.用jlink就可以将其烧写进单片机. 2 存储被 ...