bootstrap制作轮播图,水平导航栏,垂直导航栏

忘是亡心i 2022-05-16 10:57 388阅读 0赞

1.官网下载bootstrap

[https://v3.bootcss.com/][https_v3.bootcss.com]

2.引入js和相应的css

此处引用的是themeleaf写法
       <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
       <script th:src="@{/jquery/jquery-1.11.1.min.js}" ></script>
       <script th:src="@{/bootstrap/js/bootstrap.js}" ></script>

3.制作轮播图

4.制作水平导航栏

<div class="container">
                <h1>Select the system you want to operate!</h1>
                <nav class="navbar navbar-inverse">
                    <div class="navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">list1</a></li>
                            <li><a href="javascript: void(0)">list2</a></li>
                            <li><a href="javascript: void(0)">list3</a></li>
                            <li><a href="javascript: void(0)">list4</a></li>
                            <li><a href="javascript: void(0)">list5</a></li>
                        </ul>
                    </div>
                </nav>
            </div>

5.制作垂直导航栏

<div id="leftNav">
            <ul class="nav nav-pills nav-stacked">
                <li id="fis" class="active"><a href="#">系统管理</a></li>
                
                <li><a href="javascript: void(0)">nav1</a></li>
                <li><a href="javascript: void(0)">nav2</a></li>
                <li><a href="javascript: void(0)">nav3</a></li>
                <li><a href="javascript: void(0)">nav4</a></li>
                <li><a href="javascript: void(0)">nav5</a></li>
            </ul>
        </div>

[https_v3.bootcss.com]: https://v3.bootcss.com/