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. 使用VsCode自带的Emmet语法

    新建html文件,保存之后,输入"!",按Tap(或Enter)键,自动生成HTML结构 标签只要直接输入标签名(不要输入<>),按Tap(或Enter)键自动生成完整 ...

  2. 高德地图 Service 创建服务 USERKEY_PLAT_NOMATCH

    在使用高的地图 创建服务的时候 { "errmsg": "USERKEY_PLAT_NOMATCH", "errcode": 10009, ...

  3. python爬虫 | 一条高效的学习路径

    数据是创造和决策的原材料,高质量的数据都价值不菲.而利用爬虫,我们可以获取大量的价值数据,经分析可以发挥巨大的价值,比如: 豆瓣.知乎:爬取优质答案,筛选出各话题下热门内容,探索用户的舆论导向. 淘宝 ...

  4. 实验吧逆向catalyst-system Writeup

    下载之后查看知道为ELF文件,linux中执行之后发现很慢: 拖入ida中查看发现有循环调用 sleep 函数: 这是已经改过了,edit -> patch program -> chan ...

  5. Win32 API翻译

    这是从MSDN里面的Win32 SDK API函数.结构.通知.消息等等超过3000个.其中一半是整理自别人翻译. http://files.cnblogs.com/files/sishenzaixi ...

  6. SQLServer之删除约束

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

  7. Java基础——0 前言

  8. flink Standalone Cluster

    Requirements Software Requirements Flink runs on all UNIX-like environments, e.g. Linux, Mac OS X, a ...

  9. Hive:ORC File Format存储格式详解

    一.定义 ORC File,它的全名是Optimized Row Columnar (ORC) file,其实就是对RCFile做了一些优化. 据官方文档介绍,这种文件格式可以提供一种高效的方法来存储 ...

  10. zabbix源码安装 令人窒息的操作

    一.简介 zabbix-server主要分为2部分: zabbix程序 程序根据客户端的监控项,从客户端获取数据并写入到数据库,再根据触发器/动作等配置进行操作. 展示页面 使用php编写,php脚本 ...