内容 参数
  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">

        <div>

            <button class="btn btn-danger">李</button>

            <button class="btn btn-warning">杏仁</button>

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

        </div>

        <hr />

        <div class="btn-group">

            <button class="btn btn-danger">韭</button>

            <button class="btn btn-warning">葱汁</button>

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

        </div>

        <hr />

        <div class="btn-group-vertical">

            <button class="btn btn-danger">葫芦</button>

            <button class="btn btn-warning">丝瓜</button>

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

        </div>

        <!--按钮组是给按钮的父元素加的-->

    </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-group-vertical 按钮组（横着、竖着排列）的更多相关文章

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

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

  2. ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Bootstrap<基础十三> 按钮组

    按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...

  4. Bootstrap3系列：按钮组

    1. 基本实例 1.1 示例代码 <div class="btn-group"> <button type="button" class=&q ...

  5. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  6. Bootstrap--组件之按钮组

    什么是按钮组呢?简单解释:就是把一堆的按钮放在一行或者一列中.下面来看一个实例. 按钮组嘛,首先是按钮,所以会用到.btn这个类,还有就是bootstrap提供的按钮组.btn-group这个类,所以 ...

  7. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  8. Bootstrap按钮组学习

    简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或 ...

  9. Bootstrap历练实例：垂直的按钮组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. centos7上安装nodejs

    1. 确保安装编译工具 $ yum -y install gcc gcc-c++ 2. 获取官网源码 : $ wget https://nodejs.org/dist/v9.9.0/node-v9.9 ...

  2. struts2实现jQuery的异步交互

    struts2中jQuery的异步交互有两种方式: 1)是利用构造字符串的方式来实现: 使用该方法主要是在服务器端根据前端的请求,返回一个字符串信息,然后前端的jQuery通过解析该字符串信息得到对应 ...

  3. jdk8新特性-亮瞎眼的lambda表达式

    jdk8之前,尤其是在写GUI程序的事件监听的时候,各种的匿名内部类,大把大把拖沓的代码,程序毫无美感可言!既然Java中一切皆为对象,那么,就类似于某些动态语言一样,函数也可以当成是对象啊!代码块也 ...

  4. 关于oracle中的数字类型

    1.关于number类型. 以下是从其文档中摘录出的一句话: p is the precision, or the total number of significant decimal digits ...

  5. c#之正则表达式

    一,C#正则表达式符号模式 字 符 描 述 \ 转义字符,将一个具有特殊功能的字符转义为一个普通字符,或反过来 ^ 匹配输入字符串的开始位置 $ 匹配输入字符串的结束位置 * 匹配前面的零次或多次的子 ...

  6. lua学习之循环求一个数的阶乘

    --第3题 利用循环求n的阶乘 --参数检查是否是自然数 function IsNaturalNumber(n) ~= )then return false else return true end ...

  7. hdu5371 manacher + 线段树

    这题说的找出一个数组串 3等分 第一个部分和第3个部分一样,第二个部分和第一个部分回文,那么计算出这些字符串问这样的字符串最长为多少,我们先使用manacher 计算出每个位置以他为对称轴左边端点的最 ...

  8. Google Analytics for Firebase 是一款免费的应用评估解决方案，可提供关于应用使用和用户互动情况的数据分析

    Google Analytics for Firebase Google Analytics for Firebase 是一款免费的应用评估解决方案,可提供关于应用使用和用户互动情况的数据分析.Fir ...

  9. git从安装到使用

    一.Git简介 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制 ...

  10. torchvision.datasets.ImageFolder数据加载

    ImageFolder 一个通用的数据加载器,数据集中的数据以以下方式组织 root/dog/xxx.png root/dog/xxy.png root/dog/xxz.png root/cat/12 ...