关于bootstrap的一些方法

关于bootstrap的一些方法

开发工具与关键技术：Visual Studio 2015 MVC
作者：郭海明
撰写时间：2019年 6月17 日

在我们做项目的时候，为了项目的效率，项目一般都不会只使用原生的代码来搭建项目的结构，而是使用各种的框架来实现快速的页面搭建，这样既节省了整个项目的内存，又实现了开发人员的便捷和开发的效率。
我现在所学的是使用bootstrap的框架，所以写一些本人在创建项目的时候遇到的一些小问题，和一些调用bootstrap组件的方法。
刚开始接触到项目的时候，对bootstrap的理解并不是特别的深刻，对里面自带的功能也不是特别的熟悉，在bootstrap里面我创建数据表格的时候，就碰到了一个问题。

在我想将这个数据表格和两边的线完全贴在一起的时候，无论我怎么让这个数据表格的宽度变宽，这个页面两边的线就是和数据表格都还是会流出这么款的缝隙，两边贴不上。最后我认真的查阅了bootstrap的中文文档，才发现问题来源于我用于装载数据表格的那个一类里面。

装载数据表格的类我使用了container-fluid，bootstrap框架自带的.container和container-fluid容器里面，有自带的padding属性，左右两边都有15px的padding属性。所以我在container-fluid里面添加数据表格的时候，数据表格才会和container-fluid这个容器的边线产生了两边各15的间隙。

解决的方法就是在这个container-fluid里面 再添加一个P-0或者PX-0，将这个container-fluid容器的内边距改为0。

这样，container-fluid的边距改没之后，他们就自然没有间隙了。表格也就和左右两边的外边框贴在一起了。
接下来再来一个bootstratp里面的内置面板。

我们要实现的是点击查询数据就弹出查询数据的折叠面板，想要实现这个功能，首先就要在这个查询数据的类里面添加一个boostrap的data-toggle，然后加一个href，href不仅可以用于跳转网页，还可以实现触发某个ID。

然后我们在夏敏写一个折叠面板，并给折叠面板一个ID，将折叠面板的ID添加到href里面。

写完之后，到页面上刷新，页面不会马上将这个折叠面板显示出来，而是等我们点击这个数据查询的时候，才会跳出以下写好的数据查询的折叠面板

实现点击查询数据，然后弹出我们写好的查询数据内容，就代表折叠面板成功了。当我们弹出折叠面板，再继续点击数据查询，boostrap就会将这个折叠面板再次隐藏起来了。