html小记2

　　学html之前就听说过bootstrap，这次使用之后终于了解是怎么回事了。它是一个插件，能够通过直接调用来实现一些模板式的功能，基本上你想要的效果都有，当然要定制自己的页面还要改写源码或者自己写。下面简单介绍一下我掌握的相关知识。

 

　　1.首先下载bootstrap，分为三种。压缩版，源码版和Sass版。第三种不了解，我尝试过压缩版和源码版。压缩版中除了代码被压缩外，结构也不太相同，尤其是没有less等目录。结构图如下：

　　压缩版结构

　　

　　源码版结构

　　　

　　官网上说了多中安装方式，但是貌似解压完就可以用

　　

　　2.引用bootstrap

　　压缩和源码的bootstrap目录引用略有不同

　　压缩：

　　　　引用css：

　　　　<link href="css/bootstrap.min.css" rel="stylesheet">

　　　　引用js：

　　　　<script src="js/jquery-1.12.1.min.js"></script>

　　　　<link href="css/bootstrap.min.css" rel="stylesheet">

　　源码：

　　　　引用css：

　　　　<link href="dist/css/bootstrap.css" rel="stylesheet">

　　　　引用js：

　　　　<script src="dist/js/jquery-1.12.1.min.js"></script>

　　　　<script src="dist/js/bootstrap.js"></script>

　　注意，由于bootstrap的js是基于jquery的，所以一定要先应用jquery，否则会控制台会报$未定义就是jquery没找到。

　　此外，bootstrap对jquery的版本也是有要求的，记得是高于1.8我用的是1.12

 

　　现在可以使用bootstap的东西了，官网上详细的文档，来看几个基本的。

 

　　3.布局容器

　　.container 类用于固定宽度并支持响应式布局的容器。　　

<div class="container">
  ...
</div>

　　.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。　

<div class="container-fluid">
  ...
</div>

　　我的head块使用的是container-fluid样式，缩放时始终占100%

 

　　4.栅格

　　他将某一行分为了12份，你可以利用多份组合实现这一行你想要的布局。此外它还支持嵌套和偏移，我这次的布局基本就用它写的，因为我觉得它比float更靠谱。

　　来看一下他的用法：

　　

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

　　1）“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

　　2）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

　　3）栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

实例：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

效果如图：

　　　

你还可以在col中再写row-col实现嵌套，例如：

　　

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

效果如图：

　　

5.我还使用了下来菜单，不过官网上提供的不符合我的要求，所以我修改了源码重新写了一个

　　

<div class="col-md-2 dropdown" style="height: 51px">
                    <div class="menu4"  id="dropdownMenu1" style="height: 51px;margin-bottom: 0">
                        <img src="img/me.png" alt="..." class="img-rounded img3">
                        <span style="color: white">&nbsp;川仔</span>
                    </div>
                    <ul class="dropdown-menu menu4" aria-labelledby="dropdownMenu1">
                        <li class="pad">
                            <a href="#" >
                                <i class="fa fa-user white"></i>
                                <span class="mar8 white">我的主页</span>
                            </a>
                        </li>
                        <li class="pad">
                            <a href="#" >
                                <i class="fa fa-envelope-o white"></i>
                                <span class="mar8 white">私信</span>
                            </a>
                        </li>
                        <li class="pad">
                            <a href="#">
                                <i class="fa fa-gear white"></i>
                                <span class="mar8 white">设置</span>
                            </a>
                        </li>
                        <li class="pad">
                            <a href="#">
                                <i class="fa fa-power-off white"></i>
                                <span class="mar8 white">退出</span>
                            </a>
                        </li>
                    </ul>

            </div>

dropdown-menu这个类名是bootstrap封装好的，提供了鼠标略过ul时的样式和事件。我改写其源码后写出上面的代码，效果如下：

可以看到我将下拉button为一个普通的div，又去掉了原先ul的样式和事件。


6.除此之外bootstap还提供了很多现成的样式和功能，比如a标签鼠标划过会自动变色并加下划线等，很方便。这确实是一个好工具，不过在实现功能时我还是觉得自己写jq爽~另外官方文档很全，通读一遍肯定收益不少，现在less的调用还没解决，有待研究...