<!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. Hack the box邀请码和注册问题总结

    注意下,有3个坑, 1. 解码方式是随机的,记得看DATA下面提示用哪种 2. post时候可以直接用f12里的console,命令是: $.post('https://www.hackthebox. ...

  2. make工具简介

    在Linux C/C++的开发过程中,当源代码文件较少时,我们可以手动使用gcc或g++进行编译链接,但是当源代码文件较多且依赖变得复杂时,我们就需要一种简单好用的工具来帮助我们管理.于是,make应 ...

  3. 顾家办公两不误，容智ibot帮你实现高效居家办公

    春节假期结束,大部分企业已陆续开始复工.经调查显示,受新型冠状病毒疫情影响,不少企业开放了员工“在家办公“模式,就此,员工被动“SOHO”,在家办公火了. 2020 在家办公靠谱吗?会不会成为未来的趋 ...

  4. Django安装数据库MySQLdb

    在使用Django搭建与树莓派智能终端时,使用mysql作为数据库管理,遇到如下问题: django.core.exceptions.ImproperlyConfigured: Error loadi ...

  5. jQuery学习（三）

    jQuery文档操作方法 1.内部追加内容 选择器追加到内容 append(content)在当前jQuery对象内部所包含的DOM对象的内部的最后追加content对应的内容,其中content可以 ...

  6. git 操作详情

    Git 教程 1.Git 是一个开源的分布式版本控制系统 2.Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开源版本控制软件 3.Git 与常用的版本控制工具 ...

  7. 关于cmd的命令行参数的问题

    最近学习Java了解到发现需要配置环境变量其中Path需要更改为 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 而这样的行为无意间导致了win中cmd的一些参数无法使用,比 ...

  8. javaweb项目中web.xml配置文件的/和/*的区别

    1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截了所有的请求.同时对*.js,*.jpg等静态文件的访问也就 ...

  9. oracle 高级函数2

    原 oracle 高级函数 2017年08月17日 16:44:19 阅读数:1731 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013278 ...

  10. Java基础 -2.6

    String字符串 在任何语言里面 都没有提供所谓的字符串这种基本数据类型,但是从实际的使用上来讲呢,各个编程语言 为了方便程序的开发,也都会提供有字符串的相应描述 在进行字符串变量使用的时候也可以使 ...