Bootstrap

很早就想接触Bootstrap，一直在delay，寒假看过一次，不过那次是在网吧，朋友们在打lol，我却在装逼看代码(笑cry)，最后昏昏欲睡，没写实例，后来也就不了了之，最近需要写一个响应式的页面，加之这些天需要学习的必要性，终于开始看。

初体验

Bootstrap的栅格系统很强大，通过对栅格的类的配置可以很轻松地实现响应式布局，这个会在后面的学习中，陆续总结。今天要说的是，鼠标hover时，菜单如何自动下拉。

上代码: 下面是实现下拉菜单的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="col-md-12">
    <ul class="nav navbar-nav ">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">学校概况<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">学校领导</a></li>
                <li><a href="#">现任领导</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">教学机构<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">信息工程学院</a></li>
                <li><a href="#">计算机科学与技术学院</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">管理机构<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">党群职能部门</a></li>
                <li><a href="#">行政职能部门</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">师资队伍<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">师资概况</a></li>
                <li><a href="#">外聘院士</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">教育教学<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">本科生教育</a></li>
                <li><a href="#">研究生教育</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">科学研究<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">平台</a></li>
                <li><a href="#">科技成果</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">招生就业<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">本科生招生</a></li>
                <li><a href="#">研究生招生</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">国际合作<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">基本概况</a></li>
                <li><a href="#">交流项目</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">走进西科<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">综合荣誉</a></li>
                <li><a href="#">校名</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">图书馆</a>
        </li>
        <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
               aria-haspopup="true" aria-expanded="true">校友会</a>
        </li>
    </ul>
</div>

实现

在</body>前面加上下面的代码，即可实现鼠标hover时菜单自动下拉

1
2
3
4
5
6
7
8
9
10
<script>
    $('li.dropdown').mouseover(function () {

        if ($(document).width() > 767)
            $(this).addClass('open');
    }).mouseout(function () {
        if ($(document).width() > 767)
            $(this).removeClass('open');
    });
<//script>

效果

演示