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. MVC Controller return 格式分类及用法

    概述 所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Index ...

  2. python 实例六

    https://www.cnblogs.com/evablogs/p/6783498.html 题目:斐波那契数列. 程序分析:这个数列从第3项开始,每一项都等于前两项之和.故 n=1,2,f=1 n ...

  3. U盘中的快捷方式解析

    很多人都有使用绿色软件的习惯,在这里我简单称其为Portable App 将这些软甲放到U盘中随身携带,便于我们使用更加符合自身习惯的功能软件. 相信习惯将软件放到U盘启动都会碰到一个问题,就是每次打 ...

  4. Java 集合系列（三）—— LinkedList

    以脑图的形式来展示Java集合知识,让零碎知识点形成体系 LinkedList    LinkedList是一种可以在任何位置进行高效地插入和删除操作的有序序列.   它的最基本存储结构是一个节点:每 ...

  5. Win10 Service'MongoDB Server' failed to start. Verify that you have sufficient privileges to start system services【简记】

    最近工作中有需要用到 MongoDB数据库,以前用的3.*的版本,这次用的是较新4.0.6的版本,然后去官网下载安装. 安装到一半,就弹出如下提示,说是"MongoDB Server&quo ...

  6. 2017 百度杯丶二月场第一周WP

    1.祸起北荒 题目: 亿万年前 天子之子华夜,被父神之神末渊上神告知六荒十海之北荒西二旗即将发生一场"百度杯"的诸神之战 他作为天族的太子必须参与到此次诸神之战定六荒十海 华夜临危 ...

  7. 初学python列表

    首先我定义了一个列表 a = [2,3,3,5,6,7,9] 我想对列表a 的每个值都加一,哈,脑子里顿时闪过一道光 ①首先我想到的是用for 循环来进行加一,即以下代码 a = [2,3,3,5,6 ...

  8. CSS--字体|垂直居中|background

    一,字体的设置 二,垂直居中 2.1,单行文本垂直居中 2.2,多行文本垂直居中 2.3,绝对定位元素垂直居中 三.颜色的表示法 四.background ---------------------- ...

  9. 关于 pyspider Web预览界面太小的解决方法

    本人最近在学习pyspider时,遇到Web预览界面太小而无法很好的进行开发,于是在网上搜索解决方法. 准备: css代码: body{margin:;padding:;height:%;overfl ...

  10. 阿里巴巴开源的Asynchronous I/O Design and Implementation

    Motivation I/O access, for the most case, is a time-consuming process, making the TPS for single ope ...