随笔分类 -  Bootstrap

• Bootstrap Collapse
  摘要：【Bootstrap Collapse】 1、实现折叠面板组： 1）根div添加 class="panel-group" 2）根div下是多个子div class="panel" 3）被折叠的div必须是 class="panel-collapse" 4）data-toggle="collapse" 阅读全文
  posted @ 2017-06-02 14:20 Tekkaman 阅读(313) 评论(0) 推荐(0)
• Bootstrap Popover
  摘要：【Bootstrap Popover】 1、设置一个popover需要添加以下设置： 1）data-toggle="popover" 2）title="Example popover"，设置标题 3）data-container="body"，指定弹出的popover的父结点 4）data-cont 阅读全文
  posted @ 2017-06-02 13:31 Tekkaman 阅读(571) 评论(0) 推荐(0)
• Bootstrap Tooltip
  摘要：【Bootstrap Tooltip】 1、设置Tooltip： 1）data-toggle="tooltip" 2）data-placement="top"， 设置位置，可以为上、下、左、右 3）title="顶部的 Tooltip"，设置内容 2、使用Tooptip，必须调用以下代码激活； <s 阅读全文
  posted @ 2017-06-02 13:02 Tekkaman 阅读(378) 评论(0) 推荐(0)
• Bootstrap 轮播
  摘要：【Bootstrap 轮播】 1、要设置一个轮播界面，需要注意以下几点： 1）根div 必须为 class="carousel slide" 2）根div下含有三块子div a）<ol class="carousel-indicators"> b）<div class="carousel-inner 阅读全文
  posted @ 2017-06-02 00:11 Tekkaman 阅读(468) 评论(0) 推荐(0)
• Bootstrap 按钮
  摘要：【Bootstrap 按钮】 Bootstrap插件给按钮添加了loading状态。 1）调用button("loading")即可切换至loading状态。 2）调用button("reset")即可切换至reset状态。 3）data-loading-text="Loading..."属性用于设 阅读全文
  posted @ 2017-06-01 23:37 Tekkaman 阅读(369) 评论(0) 推荐(0)
• Bootstrap 进度条
  摘要：【Bootstrap 进度条】 1、基础进度条 1）根div必须 class="progress" 2）前景div为 class="progress-bar", 通过style指定宽度 2、指定颜色. progress-bar-success、progress-bar-info、progress-b 阅读全文
  posted @ 2017-06-01 15:30 Tekkaman 阅读(1348) 评论(0) 推荐(0)
• Bootstrap 导航栏
  摘要：【Bootstrap 导航栏】 NavBar是对Nav的包含。在Nav之外还做以下内容： 1、根为 <nav class="navbar navbar-default"> 2、在Nav前添加头 <div class="navbar-header"> <a class="navbar-brand"> 阅读全文
  posted @ 2017-06-01 11:53 Tekkaman 阅读(245) 评论(0) 推荐(0)
• Bootstrap 导航元素（标签页）
  摘要：【Bootstrap 导航元素】 1、基本的导航元素：标签导航。基于ul、li而来，给ul添加 class="nav nav-tabs" 即可。选中的li添加 class="active"即可。 2、用 class .nav-pills 代替 .nav-tabs 即可应用胶囊样式 3、给li添加 c 阅读全文
  posted @ 2017-06-01 11:26 Tekkaman 阅读(891) 评论(0) 推荐(0)
• Bootstrap 模态框
  摘要：【Bootstrap 模态框】 通过 data 属性： 1、在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"， 2、同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框 通过 JavaSc 阅读全文
  posted @ 2017-06-01 09:30 Tekkaman 阅读(264) 评论(0) 推荐(0)
• Bootstrap下拉菜单
  摘要：【Bootstrap 下拉菜单】 实现下拉菜单有几个要点： 1、根部div必须 class="dropdown" 2、Button必须 data-toggle="dropdown" 3、ul必须 class="dropdown-menu" 可以通过js来调用： 参考： 1、http://www.ru 阅读全文
  posted @ 2017-05-31 23:04 Tekkaman 阅读(198) 评论(0) 推荐(0)
• Bootstrap的aria-label和aria-labelledby
  摘要：【Bootstrap的aria-label和aria-labelledby】 用于盲人阅读的属性，基本也没什么用。 参考：http://blog.csdn.net/liuyan19891230/article/details/50452835 阅读全文
  posted @ 2017-05-31 20:37 Tekkaman 阅读(398) 评论(0) 推荐(0)
• Bootstrap 辅助类
  摘要：【Bootstrap 辅助类】 1、背景色 2、 3、向左右浮动 参考：http://www.runoob.com/bootstrap/bootstrap-helper-classes.html 阅读全文
  posted @ 2017-05-31 16:52 Tekkaman 阅读(211) 评论(0) 推荐(0)
• clearfix原理
  摘要：【clearfix原理】 链接：http://blog.sina.com.cn/s/blog_60b35e830101c1r8.html 阅读全文
  posted @ 2017-05-31 16:37 Tekkaman 阅读(225) 评论(0) 推荐(0)
• Bootstrap 表单
  摘要：【Bootstrap 表单】 1、垂直（默认表单） 1、form元素添加role="form" 2、div添加class ="form-group" 3、input添加class="form-control" 2、内联表单。form元素添加class="form-inline"即可。 3、水平表单。 阅读全文
  posted @ 2017-05-31 14:59 Tekkaman 阅读(235) 评论(0) 推荐(0)
• Bootstrap 表格
  摘要：【Bootstrap 表格】 1、 2、 3、 4、 5、 <table class="table"> <caption>上下文表格布局</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th></tr> </thead> <tbody 阅读全文
  posted @ 2017-05-31 13:42 Tekkaman 阅读(249) 评论(0) 推荐(0)
• Bootstrap 网格系统
  摘要：【Bootstrap 网格系统】 1、网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的： row必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 使用row来创建col的水平组 阅读全文
  posted @ 2017-05-31 13:10 Tekkaman 阅读(200) 评论(0) 推荐(0)
• Bootstrap 代码
  摘要：【Bootstrap 代码】 Bootstrap 允许您以两种方式显示代码： 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。 1、展示HTM 阅读全文
  posted @ 2017-05-31 01:35 Tekkaman 阅读(275) 评论(0) 推荐(0)
• Bootstrap排版
  摘要：【Bootstrap排版】 1、为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。 2、文本对齐 3、文本样式 4、缩写 5、blockquote 6、大小写文本 参考：http://www.runoob.com/bootstrap/bootstrap- 阅读全文
  posted @ 2017-05-31 01:15 Tekkaman 阅读(439) 评论(0) 推荐(0)
• Bootstrap按钮
  摘要：【Bootstrap按钮】 1、 2、 3、 4、 5、 6、 7、 8、 9、 参考：http://www.runoob.com/bootstrap/bootstrap-buttons.html 阅读全文
  posted @ 2017-05-31 00:59 Tekkaman 阅读(176) 评论(0) 推荐(0)