Carousel in Twitter Bootstrap

ShootingStar · March 17, 2012

Здравствуйте, использывал карусель от бутстрепа, нравилось то что можно было вставлять картинки большего формата и карусель автоматом уменьшала их.

bootstrap 2.0.1:

bootstrap 2.0.2:

Не могу найти и за чего карусель увеличилась. Если знаете подобную карусель которая умеет уменьшать картинку подскажите пожалуйста.

код страници где вставлена карусель:

Reveal hidden contents


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <!--[if IE]>
    <script src="js/html5.js"></script><![endif]-->
    <title>Портфолио HTML верстальщика</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
    </style>

</head>

<body>
<header>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="/" class="brand">Portfolio</a>

                <div class="nav-collapse">
                    <ul class="nav tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#home">
                                <i class="icon-home icon-white"></i>
                                Мои работы
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#resume">
                                <i class="icon-user icon-white">
                                </i>
                                Резюме
                            </a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#contact">
                                <i class="icon-envelope icon-white">
                                </i>
                                Контакты
                            </a>
                        </li>

                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
</header>
<div class="container">
    <!-- Main hero unit for a primary marketing message or call to action -->
    <div class="tab-content">
        <div id="home" class="tab-pane active">
            <div class="hero-unit">
                <div id="myCarousel" class="carousel">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item"><a href="les2/index.html"><img src="img/example11.jpg"
                                                                                alt=""></a></div>
                        <div class="item">
                            <a href="les2/index.html"><img src="img/example22.jpg" alt=""></a>
                        </div>

                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                </div>


            </div>


        </div>
        <!-- home -->
        <div id="resume" class="tab-pane">

        </div>
        <div id="contact" class="tab-pane">

        </div>
    </div>
    <hr/>

    <footer>
    </footer>
</div>


</body>
</html>

Changelog v 2.0.2

CSS файл версии 2.0.1

Sign In

Carousel in Twitter Bootstrap

7 members have voted

Question

ShootingStar

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information