bootstrap 简单模板

引用：https://blog.csdn.net/aojiancc2/article/details/52130774

 

一：页面套用

         模板下面专门有个内容页是空白的页面blank page,方便我们套用，右边菜单我们把不需要的删除掉就留几个就可以了

          

         内容的位置我们右键源码可以很方便的看到，

         其实他注释和样式名称表达得很清楚，这个(class="container-fluid")样式下面的就是放得内容了

         

         

二：表格的简单使用

 

         1:我们在basic table找到到随便复制一个表格出来

                      注意：如果我们是根据样式去查询的话找到的时候可能会存在很多个，虽然最好是用名称去找，而且名称也有小几率重复比如这里的Adance Table

           

                   其实我们直接在浏览器中右键源码edit as html直接就复制了，比在网页中去查找方便多了

 

    复制后添加粘贴到内容中效果如下：

     

      主要问题这个表格现在宽度不是自适应填充满内容页的，找了很久才找到，其实就是一个div上一个叫span6的样式

      

     去掉就可以了

       

        经测试其实class="span6",如果改成span7会变宽，数值越大就越宽

 

 

三：表格加上编辑列

           1:复制那个有编辑按钮的表格过来，把外面的class="span6"去掉让他自适应，并把他的按钮复制几个出来

               

              效果如下：

              

              他的自适应导致了操作列太长了，我们可以自己加上一个行内样式，指定一个宽带

                

               效果如下：

         

          怎么改变他们的间距呢?直接在a标签上加一个行内样式magin-left,只加一列对比看看

                

              效果如下：

               

          改变操作按钮图标，bootstrap模板中有个图标页有很多直接把里边的样式复制过来就行了

       

       随便改几个 

      

      效果如下：

        

       

       a上面的按钮样式去掉只保留图标注意span设置宽度时要加上块级元才行

       

     效果如下：

     

              

四：表格中的常用样式解释

      1：table-bordered 表格的加上边框效果         

        2: table-advance表头有颜色效果

              

         注意如果他和table-bordered同时作用也不会加上边框效果 

          3：table-striped隔行变色效果

                 

 

  Demo下载地址：

   http://download.csdn.net/detail/aojiancc2/9596750
————————————————
版权声明：本文为CSDN博主「aojiancc2」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aojiancc2/article/details/52130774