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. Linux分页机制之概述--Linux内存管理(六)

    1 分页机制 在虚拟内存中,页表是个映射表的概念, 即从进程能理解的线性地址(linear address)映射到存储器上的物理地址(phisical address). 很显然,这个页表是需要常驻内 ...

  2. 关于clone(java.lang.Object)重写

    1. 需要实现接口java.lang.Cloneable 2. 重写java.lang.Object的clone 3. clone访问权限扩大为public 4. 不实现(java.lang.Clon ...

  3. Python 位操作运算符

    & 按位与运算符:参与运算的两个值,如果两个相应位都为1,则该位的结果为1,否则为0 (a & b) 输出结果 12 ,二进制解释: 0000 1100 | 按位或运算符:只要对应的二 ...

  4. Altium Designer 复制和粘贴功能

    在使用Altium Deigner时,很多时候会使用到复制和粘贴功能,Altium Designer复制分为三步:第一步选中要复制的内容(包括点选和框选),第二步,启动COPY命令,这时光标会变成十字 ...

  5. 周末班：Python基础之模块

    什么是模块 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写 ...

  6. FutureTask并发详解，通俗易懂

    最近做项目,使用到了FutureTask和主线程并发,应用到实际中还是挺实用的,特在此总结一下. 有不对之处,忘各位多多指出. package com.demo; import java.util.c ...

  7. Linux查看mysql 安装路径和运行路径

    一.查看文件安装路径 由于软件安装的地方不止一个地方,所有先说查看文件安装的所有路径(地址). 这里以mysql为例.比如说我安装了mysql,但是不知道文件都安装在哪些地方.放在哪些文件夹里,可以用 ...

  8. Push rejected: Push to origin/master was rejected错误解决方案

    解决方案如下: 1.切换到自己项目所在的目录,右键选择GIT BASH Here,Idea中可使用Alt+F12 2.在terminl窗口中依次输入命令: git pull git pull orig ...

  9. [LeetCode] 12,13 整数和罗马数互转

    12. 整数转罗马数字 题目链接:https://leetcode-cn.com/problems/integer-to-roman/ 题目描述: 罗马数字包含以下七种字符: I, V, X, L,C ...

  10. spring中基于注解使用AOP

    本文内容:spring中如何使用注解实现面向切面编程,以及如何使用自定义注解. 一个场景 比如用户登录,每个请求发起之前都会判断用户是否登录,如果每个请求都去判断一次,那就重复地做了很多事情,只要是有 ...