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. UltraEdit 注册机

    IDM-All-Products-KeyGen-v3.6UltraEdit 注册机 1.断开网络连接,运行UltraEdit软件后,点击“帮助”—“注册/激活”; 2.许可证ID填写“zd423”.密 ...

  2. 宇宙第一开发工具：vs2019 开发Python

    1.初步认识 现在人工智能逐步进入人们的视野,人工智能开发也越来越火. 而python语言,被作为大数据库开发的首选语言之一~.前一段时间vs2019预览版发布.相信不少小伙伴已经开始使用,vs201 ...

  3. GenericServlet 、Servlet和httpServler

    -------[转] 1.GenericServlet类是所有Servlet类的祖先类. 2.HttpServlet类继承了GenericServlet类. 3.Servlet有两个非常重要的的对象, ...

  4. Threading.Timer用法

    protected System.Threading.Timer executeTimer;//定时器 private int interval;//定时器执行间隔周期 executeTimer = ...

  5. Asp.Net Core 实现谷歌翻译ApI 免费版

    由于谷歌翻译官方API是付费版本,本着免费和开源的精神.分享一下用 Net Core 实现谷歌翻译API的代码. 项目引用的Nuget 包: ChakraCore.NET Newtonsoft.Jso ...

  6. Proxmox VE登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options.

    问题描述: 用的是免费版的,所以每次都提示这个没有有效的订阅挺烦的 解决方法: 修改文件/usr/share/javascript/proxmox-widget-toolkit/proxmoxlib. ...

  7. PowerDesigner导出SQL，注释为空时以name代替

    版本 操作步骤 打开Edit Current DBMS 选中Script->Objects->Column->Add 将Value中的内容全部替换为如下 %20:COLUMN% [% ...

  8. China Tightens Recycling Import Rules

    China Tightens Recycling Import Rules We have all seen the pictures of cities in China with air poll ...

  9. .NET CORE学习笔记系列(2)——依赖注入【2】基于IoC的设计模式

    原文:https://www.cnblogs.com/artech/p/net-core-di-02.html 正如我们在<控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式 ...

  10. 需求规格说明书（SRS）特点

    需求说明书的7大特征: 完整性 正确性 可行性 必要性 划分优先级 无二义性 可验证性 每条需求规格说明书的4大特点: 完整性 一致性 可修改性 可跟踪性 需求管理就是一种获取.组织并记录系统需求的系 ...