bootstrap提供了面板排版工具和折叠插件，能够用来实现新闻列表、留言板、博客分块等；

1、折叠插件；

<a data-toggle="collapse" data-target="#accordOne" href="">2018-12-26</a>

<div id = "accordOne" class="collapse in">

　　测试以下

</div>

关键是data-toggle="collapse", 以及 data-target="#id"（设置要折叠的区域, id)；

2、面板排版工具；

<div class="panel panel-default">

	<div class="panel-heading">2018-12-26</div>

	<div class="panel-body">测试以下</div>

</div>

　　

bootstrap学习： 折叠插件和面板的更多相关文章

  1. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

  2. bootstrap学习笔记 插件概述

    Bootstrap插件概览 在前面布局组件章节中所讨论的组件仅仅是个开始.Bootstrap自带的12种jQuery插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的js开发人员, 你也 ...

  3. bootstrap学习——javascript插件篇

    飞近期做的一个小项目须要用到一个模态框和一个图片浏览插件,并把二者结合,刚好bootstrap有相应插件,下面是学习应用流程: 1.    引入js文件: 能够单个引入相应插件文件,或一次所有引入.飞 ...

  4. Bootstrap学习js插件篇之滚动监听

    1.滚动监听 案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.Bootstrap中文网左侧就是一个滚动监听的例子. 代码段: <nav id="navbar-examp ...

  5. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  6. Bootstrap学习 - JavaScript插件

     模态框 <div class="modal" id="myModal" tabindex="-1" role="dialo ...

  7. Bootstrap学习js插件篇之提示框

    案例 受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题. 将鼠标悬 ...

  8. Bootstrap学习js插件篇之下拉菜单

    案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...

  9. Bootstrap 学习笔记11 按钮和折叠插件

     复选框: <div class="btn-group" data-toggle="buttons"> <label for="se ...

随机推荐

  1. 搭建MHA时 yum 安装perl模块提示 baseurl 错误

    今天在搭建MySQL MHA  安装MHA node所需的perl模块(DBD:mysql)时遇到了一个小的错误,如果思路不对的话,还是产生不少麻烦. 现梳理记录下来. 问题现象 执行的命令 yum ...

  2. The account that is running SQL Server Setup does not have one or all of the following rights: the right to back up files and directories, the right to manage auditing and the security log and the rig

    安装SQL SERVER 是规则检查提示权限问题 运行secpol.msc,没有Debug program权限,添加即可,如果已加域则要在域策略修改,或退域安装后在加域.

  3. git取消跟踪已版本控制的文件

    git 不再追踪文件改动 git update-index --assume-unchanged filePath git 恢复追踪文件改动 git update-index —no-assume-u ...

  4. Python爬虫之正则表达式（2）

    # 最常规的匹配 import re content = 'Hello 123 4567 World_This is a Regex Demo' print(len(content)) result ...

  5. SQLServer之删除约束

    使用SSMS数据库管理工具删除约束 1.连接数据库,选择数据表->展开键或者约束->选择要删除的约束->右键点击->选择删除. 2.在删除对象弹出框中->点击确定. 3. ...

  6. 第五节 matplotlib库

    一.Matplotlib基础知识 1.1Matplotlib中的基本图表包括的元素 x轴和y轴 axis水平和垂直的轴线 x轴和y轴刻度 tick刻度标示坐标轴的分隔,包括最小刻度和最大刻度 x轴和y ...

  7. 手把手教你实现Android RecyclerView上拉加载功能

    摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...

  8. 记一次Maven编译IKAnalyzer失败及解决办法

    下载了一个开源项目,maven形式组织的,其中有一个依赖包是IKAnalyzer. 由于mvnrepository中不存在IKAnalyzer的坐标,因此该依赖包需要自己下载安装到本地maven仓库才 ...

  9. Linux 修改本地时间 (centos为例)

    1.  tzselect [root@xxxx etc]# tzselect --- 选择时区命令 Please identify a location so that time zone rules ...

  10. JS 灵活使用 console 调试

    前言: Web 开发中最常用的调试就是 console.log(),console 除了 本身 log() 方法外,还有其他很多方法. console.log() console.log() 有许多意 ...