|
|
| Line 2: |
Line 2: |
| | | | |
| | <html> | | <html> |
| − | <head>
| |
| − | <style type="text/css">
| |
| − | h2{
| |
| − | margin: 0;
| |
| − | color: #666;
| |
| − | padding-top: 90px;
| |
| − | font-size: 52px;
| |
| − | font-family: "trebuchet ms", sans-serif;
| |
| − | }
| |
| − | .item{
| |
| − | background: #333;
| |
| − | text-align: center;
| |
| − | height: 300px !important;
| |
| − | }
| |
| − | .carousel{
| |
| − | margin-top: 20px;
| |
| − | }
| |
| − | .bs-example{
| |
| − | margin: 20px;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div class="bs-example">
| |
| − | <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
| |
| − | <!-- Carousel indicators -->
| |
| − | <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>
| |
| − | <!-- Carousel items -->
| |
| − | <div class="carousel-inner">
| |
| − | <div class="active item">
| |
| − | <h2>Slide 1</h2>
| |
| − | <div class="carousel-caption">
| |
| − | <h3>First slide label</h3>
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="item">
| |
| − | <h2>Slide 2</h2>
| |
| − | <div class="carousel-caption">
| |
| − | <h3>Second slide label</h3>
| |
| − | <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="item">
| |
| − | <h2>Slide 3</h2>
| |
| − | <div class="carousel-caption">
| |
| − | <h3>Third slide label</h3>
| |
| − | <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!-- Carousel nav -->
| |
| − | <a class="carousel-control left" href="#myCarousel" data-slide="prev">
| |
| − | <span class="glyphicon glyphicon-chevron-left"></span>
| |
| − | </a>
| |
| − | <a class="carousel-control right" href="#myCarousel" data-slide="next">
| |
| − | <span class="glyphicon glyphicon-chevron-right"></span>
| |
| − | </a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </head>
| |
| | | | |
| − |
| |
| | <body> | | <body> |
| | | | |
| − | | + | <div class="container"> |
| − | <button type="button" class="btn btn-primary">Apple</button>
| + | <div class="row"> |
| − | <button type="button" class="btn btn-primary">Samsung</button> | + | <div class="col-md-3"> |
| − | <div class="btn-group"> | + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |
| − | <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
| + | incididunt ut labore et dolore magna aliqua.</p> |
| − | Sony <span class="caret"></span></button> | + | </div> |
| − | <ul class="dropdown-menu" role="menu">
| + | <div class="col-md-3"> |
| − | <li><a href="#">Tablet</a></li>
| + | <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut |
| − | <li><a href="#">Smartphone</a></li>
| + | aliquip ex ea commodo consequat.</p> |
| − | </ul> | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium |
| | + | doloremque laudantium, totam rem aperiam.</p> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae |
| | + | dicta sunt explicabo.</p> |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| − | <div class="btn-toolbar">
| |
| − | <!--Default buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-default">Action</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--Primary buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-primary">Action</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--Info buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-info">Info</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--Success buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-success">Success</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--Warning buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-warning">Warning</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <!--Danger buttons with dropdown menu-->
| |
| − | <div class="btn-group">
| |
| − | <button type="button" class="btn btn-danger">Danger</button>
| |
| − | <button type="button" data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
| |
| − | <ul class="dropdown-menu">
| |
| − | <li><a href="#">Action</a></li>
| |
| − | <li><a href="#">Another action</a></li>
| |
| − | <li class="divider"></li>
| |
| − | <li><a href="#">Separated link</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| | </div> | | </div> |
| | | | |
| | + | </body> |
| | | | |
| − | </body>
| |
| | </html> | | </html> |
| | | | |
| | {{Bielefeld-CeBiTec/Footer}} | | {{Bielefeld-CeBiTec/Footer}} |
