内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container">

        <button class="btn btn-primary">btn-primary</button>

        <button class="btn btn-warning btn-xs">btn-warning</button>

        <button class="btn btn-success btn-sm">btn-success</button>

        <button class="btn btn-info btn-lg">btn-info</button>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 btn-xs/sm... 按钮的四种大小的更多相关文章

  1. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  2. Android按钮的四种点击事件

    本文记录一下按钮的四种点击事件 第一种 public class MainActivity extends Activity { @Override protected void onCreate(B ...

  3. Android点击Button按钮的四种事件监听方法总结

    首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:a ...

  4. Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. Android按钮绑定四种方式

    public class MainActivity extends Activity implements OnClickListener{ @Override protected void onCr ...

  6. Android的按钮单击事件及监听器四种常见的实现方式

    第一种:匿名内部类作为事件监听器类<ignore_js_op>大部分时候,事件处理器都没有什么利用价值(可利用代码通常都被抽象成了业务逻辑方法),因此大部分事件监听器只是临时使用一次,所以 ...

  7. 基础总结篇之二：Activity的四种launchMode

    合抱之木,生於毫末:九層之台,起於累土:千里之行,始於足下.<老子> 今天在社区看到有朋友问“如何在半年内成为顶级架构师”,有网友道“关灯睡觉,不用半年的...”,的确,做梦还来的快一些. ...

  8. 基础总结篇之二：Activity的四种launchMode （转载）

    转自:http://blog.csdn.net/liuhe688/article/details/6754323 合抱之木,生於毫末:九層之台,起於累土:千里之行,始於足下.<老子> 今天 ...

  9. Asp.net 面向接口可扩展框架之使用“类型转化基础服务”测试四种Mapper(AutoMapper、EmitMapper、NLiteMapper及TinyMapper)

    Asp.net 面向接口可扩展框架的“类型转化基础服务”是我认为除了“核心容器”之外最为重要的组成部分 但是前面博文一出,争议很多,为此我再写一篇类型转化基础服务和各种Mapper结合的例子,顺便对各 ...

随机推荐

  1. Hibernate.编写xml文件无自动提示信息

    Hibernate.编写xml文件无自动提示信息 注意: 配置 xxxx.hbm.xml 文件的自动提示.和配置 hibernate.cfg.xml 文件的提示,操作步骤是一样的.只是复制的文件内容. ...

  2. JSP知识点

    1.九大内置对象: request HttpServletRequest类的实例 response HttpServletResponse类的实例 out PrintWriter类的实例,用于把结果输 ...

  3. Linux 查看磁盘或文件夹及文件大小

    当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的选择. df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.    du可以查看文件及文件夹的大小. ...

  4. datetime处理日期和时间

    datetime.now() # 获取当前datetimedatetime.utcnow() datetime(2017, 5, 23, 12, 20) # 用指定日期时间创建datetime 一.将 ...

  5. IO多路复用 IO异步

    一.概念说明 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的环境给出的答案是不同的.所以先限定一下本文的环境.本文讨论的背景是Linux环境下的network I ...

  6. 收音机FM和AM的区别

    1.频率区别 FM = Frequency Modulation 调频,微波:微波传输,信号质量高,传输成本低,发射功率小,覆盖范围小,受地理因素影响较大,一般作为城市广播的首选.比如你的家乡城市台, ...

  7. How to solve the problem that BMW Icom A2 A3 host can’t be connected?

    Aftre the BMW ICOM host is connected to the car via a 16PIN connector, and the other side is connect ...

  8. logger日志模块

    简单配合模式: import logging#简单配置logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s ...

  9. 每日linux命令学习-sed

    Linux的文本处理实用工具主要由sed和awk命令,二者虽然略有差异,但都使用正则表达式,默认使用标准I/O,并且使用管道命令可以将前一个命令的输出作为下一个命令的输入.笔者将在本节学习sed命令. ...

  10. Maven配置阿里云镜像仓库

    配置文件:D:\MyDev\Maven\apache-maven-3.0.5\conf\settings.xml <mirrors> <mirror> <id>al ...