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. C#基础学习第一天

    ..net与C# .NET是一个框架.一种平台.一种技术 C#是一种编程语言,可以开发基于.NET平台的应用 .NET能干什么 Winform ASP.NET Wwb wphone Unity3D游戏 ...

  2. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  3. 9102 IT人保持记忆力及健康的方法

    做技术时间久了,我们会发现有的时候我们会感觉记忆力衰减太快,前脚刚忙完的事或者刚做完计划任务没多久就遗忘了,或者是以前轻车熟入的方法死活都记不起来了,亦或者之前学习一门技术很快就掌握真谛,现在即便花N ...

  4. windows下scrapy安装问题，以及Twisted安装报错（error: Microsoft Visual C++ 14.0 is required.）完美解决办法

    方法1(通常是失败的) 1. 命令行执行: pip3 install scrapy 不管是网络问题也好,缺少相关的包也好,用这条命令安装scrapy我就没成功过...难受 方法2(成功) 手动安装相关 ...

  5. Linux之Samba部署

    1.Samba介绍 Samba 是在 Linux 和 UNIX 系统上实现 SMB 协议的一个免费软件,由服务器及客户端程序构成,SMB(Server Messages Block,信息服务块)是一种 ...

  6. LeetCode算法题-Student Attendance Record I（Java实现）

    这是悦乐书的第258次更新,第271篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第125题(顺位题号是551).您将获得一个表示学生出勤记录的字符串. 该记录仅包含以下 ...

  7. SpringBoot使用注解实现事务管理

    conttoller controller和普通的controller类一样, 不用改变 @RequestMapping(value = "/path/{id}", method ...

  8. 面向对象_item项目

    详细见老师博客:http://www.cnblogs.com/Eva-J/articles/7351812.html#_label9 __getitem__\__setitem__\__delitem ...

  9. Equinox OSGi应用嵌入Jersey框架搭建REST服务

    原文地址:https://www.cnblogs.com/kira2will/p/5040264.html 一.环境 eclipse版本:eclipse-luna 4.4 jre版本:1.8 二.Eq ...

  10. 在OSGI容器Equinox中嵌入HttpServer

    原文地址:https://liugang594.iteye.com/blog/1328050 简单介绍一下如何在一个osgi的bundle中内嵌使用http服务 一.基础 首先看看在OSGI中怎么启动 ...