<!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>

        <div class="container">

            <h2>自适应按钮组</h2>

            <p>以通过 .btn-group-justified 类来设置自适应大小的按钮组。</p>

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

                <a href="#" class="btn btn-primary">Apple</a>

                <a href="#" class="btn btn-primary">Samsung</a>

                <a href="#" class="btn btn-primary">Sony</a>

            </div>

        </div>

    </body>

</html>

<!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>

        <div class="container">

            <h2>自适应按钮组</h2>

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

                <div class="btn-group">

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

                </div>

                <div class="btn-group">

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

                </div>

                <div class="btn-group">

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

                </div>

            </div>

        </div>

    </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 按钮：按钮被点击

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：块级按钮(拉伸至父元素100%的宽度)

    <!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. Titer软件学习(Translation Initiation siTE detectoR)

    Titer Source Codes lnk: https://github.com/zhangsaithu/titer 函数: collections.namedtuple()函数:https:// ...

  2. 【摘录自MDN】预定义函数

    JavaScript语言有好些个顶级的内建函数: eval() eval()方法会对一串字符串形式的JavaScript代码字符求值. uneval()  uneval()方法创建的一个Object的 ...

  3. WEB - token

    token概念参考 https://ninghao.net/blog/2834 https://stackoverflow.com/questions/1592534/what-is-token-ba ...

  4. masonry使用添加紧凑、抗压属性

    // 内容紧凑 - 优先完全显示内容,且不多占像素. [self.leftLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh for ...

  5. GSS系列题解——最大子段和系列

    开坑啦! 2019 3/28 以前一直不知道怎么搞最大子段和,如今终于可以学习,其实真的很简单啊. 2019 3/29 树链剖分上最大子段和也OK啦 前置技能:线段树 题目大意:询问区间[l,r]的最 ...

  6. Linux操作系统服务器学习笔记一

    初识Linux: Linux 是什么? Linux是一套免费使用和自由传播的类Unix操作系统,是一个多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协议 ...

  7. 孤荷凌寒自学python第103天认识区块链017

    [主要内容] 今天继续分析从github上获取的开源代码怎么实现简单区块链的入门知识,共用时间25分钟. (此外整理作笔记花费了约34分钟) 详细学习过程见文末学习过程屏幕录像. 今天所作的工作是进一 ...

  8. Maven 项目中使用 logback

    添加依赖 <dependency> <groupId>net.logstash.logback</groupId> <artifactId>logsta ...

  9. freemarker 作为 word 模板实现下载功能

    1:新建一个.doc 文档写好自己要导出文字如下图 2:把word 文档另存为xml 格式的文件用编辑器打开如图下,(如果你打开文件里面的标签没换行格式,那么你在myeclipse 新建一个jsp 文 ...

  10. Shell Sort(希尔排序)

    这个排序算法很厉害,我个人很喜欢这个算法,但算法的时间复杂度难计.算法对增量(这里也称作step(步长))的选择也需要注意,只记得个希尔增量的最坏情况为O(n^2).Hibbard增量的最坏情况为O( ...