bootstrap锚点跳转滑动效果以及table固定列宽

bootstrap锚点跳转滑动效果以及table固定列宽

锚点跳转

锚点跳转的主要代码如下

 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"</script>
 <script>
 $(function(){
    $("a").click(function () {
      $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top-15 +"px"}, 300);
    return false;
    });
   })
 </script>

首先引入jquery.js，后面的函数具体来具体讲解一下：

$(function(){
....
})

表示页面加载完会执行这个函数

 $("a").click(function () {
......
});

表示点击a标签会执行这个click函数

$("html, body").animate();

这个函数代表一个动画，有两个参数，后面一个参数代表动画持续的时间。前面一个参数表示这个动画的动作，具体不太清楚

表格固定宽度

由于bootstrap的表格是自适应的，所以如果有一列的内容特别长，那一列的列宽就会比较长，所以需要固定宽度。

          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <colgroup>
                <col style="width:30%;">
              </colgroup>
              <thead>
                <tr>
                  <th >field_CN</th>
                  <th >field_EN</th>
                  <th >type</th>
                  <th >index</th>
                </tr>
              </thead>
                ......
            </table>
          </div>

注意这个地方

          <colgroup>
            <col style="width:30%;">
            <col style>
            <col style="width:20%;">
          </colgroup>

如果只定义了部分宽度，其他单元格会自动适应，进行调整。