1. 前言

把车队主页给换了, 其实就是直接把discuz下的index.php给删了换成自己的, 然而自以为做的差不多了, 没想到好多以前的设计都错了, 其中就有一些关于bootstrap的使用上的错误

2. Collapse 功能

导航栏的collapse, 以前测试用的网站写的简陋, 没注意导航栏的手机端兼容, 实际上导航栏的使用如下:

<div class="container">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Test</a>
    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li id="ftp"><a href="ftp://10.1.166.197" target="_blank">FTP</a></li>
      <li id="Wiki"><a href="http://10.1.166.197:8080/xwiki/bin/view/" target="_blank">Wiki</a></li>
      <li id="forum"><a href="http://10.1.166.197/forum.php" target="_blank">Forum</a></li>
      <li id="contact"><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

以前定义了class为navbar-collapse collapse的标签, 但是未定义拥有属性data-toggle="collapse" data-target=".navbar-collapse"的标签, 故用手机登陆时并没有好的效果, 现在则可以。看网上源码, 似乎这样写就可以了, 但是以上实现导致其button标签在电脑端浏览也显示, 不够美观, 于是在css里添加@media使button仅在小屏幕才显示出来, 并且设置right:6px使其显示在右侧, 当然还得指定position属性。

3. BootStrap 不兼容 IE11

因为不想兼容IE6/7/8，所以直接使用jQuery2.x版本，没想到的是搭配BootStrap使用连IE11都不兼容，网页全面崩溃，IE下F12:

  • Object doesn’t support property or method ‘addEventListener’
  • Bootstrap’s JavaScript requires jQuery
  • The value of the property ‘$’ is null or undefined, not a Function object

而我的jQuery引用必然是在Bootstrap之前的, Chrome和Edge上都可以理想的呈现, 只能是IE11的问题了。Google了一些方法尝试了下, 都不是很满意, 直到看到下面这句<meta http-equiv="X-UA-Compatible" content="IE=Edge" >, 也很有趣, 既然Edge兼容的话，那就将页面设置为Edge兼容模式就好了。当然这也有可能有其他问题, 比如非Win10的系统, 因为Win10以前的系统并没有自带Edge, 手边暂时也没有其他电脑测试, 所以也不明白是否支持这个兼容模式。