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

原文地址:https://www.cnblogs.com/qiu18359243869/p/12664747.html