Bootstrap3.0学习（一）

最新推荐文章于 2025-05-21 12:17:01 发布

转载最新推荐文章于 2025-05-21 12:17:01 发布 · 433 阅读

本教程详细介绍了如何使用Bootstrap进行网页布局，并展示了如何创建动态轮播效果。包括导航栏实现、Carousel轮播应用的代码示例及运行效果说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

--摘自--百度百科

准备工作：

1、去官网下载bootstrap文件 http://v3.bootcss.com/getting-started/

2、网站引用bootstrap文件

注意：bootstrap脚本是建立在jquery基础上的，在引用bootstrap.min.js前需引用jquery,jquery版本支持1.9.1以上版本。

一：导航栏

<nav class="navbar
 navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container">

        <ul class="nav
 nav-pills" >

            <li class="dropdown">

                <a class="dropdown-toggle"
 data-toggle="dropdown" href="#">首页 <span class="caret"></span></a>

                <ul class="dropdown-menu">

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Profile</a></li>

                    <li><a href="#">Messages</a></li>

                </ul>

            </li>

            <li><a href="#">Home</a></li>

            <li><a href="#">Home</a></li>

            <li><a href="#">Home</a></li>

        </ul>

    </div>

    </nav>

　　运行后效果为：

二：Carousel 轮播

<div id="myCarousel"
 class="carousel slide" data-ride="carousel">

        <!--轮播指标-->

        <ol class="carousel-indicators">

            <li data-target="#myCarousel"
 data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel"
 data-slide-to="1"></li>

            <li data-target="#myCarousel"
 data-slide-to="2"></li>

        </ol>

        <!--轮播项目-->

        <div class="carousel-inner"
 role="listbox">

            <div class="item
 active">

                <img src="../Img/xx.png"
 />

                <div class="container">

                    <div class="carousel-caption">标题1</div>

                </div>

            </div>

            <div class="item">

                <img src="../Img/xx.png"
 />

                <div class="container">

                    <div class="carousel-caption">标题2</div>

                </div>

            </div>

            <div class="item">

                <img src="../Img/xx.png"
 />

                <div class="container">

                    <div class="carousel-caption">标题3</div>

                </div>

            </div>

        </div>

        <!--轮播导航-->

        <a class="carousel-control
 left" href="#myCarousel" data-slide="prev">

            <span class="glyphicon
 glyphicon-chevron-left"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="carousel-control
 right" href="#myCarousel" data-slide="next">

            <span class="glyphicon
 glyphicon-chevron-right"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

　　运行效果如图：

用法：

通过 data属性：使用data属性可以控制轮播的位置。

属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置。

使用data-ride="carousel"属性用于标记轮播在页面加载时就开始播放动画。

通过javascript：可以通过 $('.carousel').carousel()手动调用。

具体使用方法可以去bootstrap官网了解http://www.bootcss.com/