|
|
| Line 1: |
Line 1: |
| − |
| |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <link rel="stylesheet" href="https://2016.igem.org/Template:NKU_China/css/bootstrap?action=raw&ctype=text/css">
| + | <meta charset="utf-8"> |
| − | <script src="https://2016.igem.org/Template:NKU_China/js/jquery?action=raw&ctype=text/javascript"></script> | + | <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> |
| − | <script src="https://2016.igem.org/Template:NKU_China/js/bootstrap?action=raw&ctype=text/javascript"></script>
| + | <link rel="stylesheet" href="http://static.runoob.com/assets/bootstrap/3.3.7/css/bootstrap.min.css"> |
| − |
| + | <script src="http://static.runoob.com/assets/jquery/2.0.3/jquery.min.js"></script> |
| − | <!--separatrix-->
| + | <script src="http://static.runoob.com/assets/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| − |
| + | |
| − | <style>
| + | |
| − | #slider8 {
| + | |
| − | padding:10vh 6vw 20vh 6vw;
| + | |
| − | background:#EDEEF0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .h1 {
| + | |
| − | font-family: "Lato", Arial, Verdana;
| + | |
| − | font-weight: 100;
| + | |
| − | color: #444649;
| + | |
| − | line-height:1.1;
| + | |
| − | font-size:1.75rem;
| + | |
| − | padding:1.25rem 0 0.625rem 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .p {
| + | |
| − | color: #939393;
| + | |
| − | font-family: 'Open Sans',sans-serif;
| + | |
| − | font-weight:300;
| + | |
| − | line-height:1.42857;
| + | |
| − | font-size:1.1rem;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators {
| + | |
| − | bottom:-3rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators li {
| + | |
| − | border-color:#33cccc;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider8 .carousel-indicators li.active {
| + | |
| − | background-color:#33cccc;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <script>
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | </script>
| + | |
| | </head> | | </head> |
| | <body> | | <body> |
| − |
| |
| − | <main>
| |
| − | <div id="slider8">
| |
| − | <div class="h1">
| |
| − | Testimonial
| |
| − | </div>
| |
| − | <div id="carousel-demo" class="carousel slide" data-ride="carousel">
| |
| − | <ol class="carousel-indicators">
| |
| − | <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
| |
| − | <li data-target="#carousel-demo" data-slide-to="1"></li>
| |
| − | <li data-target="#carousel-demo" data-slide-to="2"></li>
| |
| − | </ol>
| |
| − | <div class="carousel-inner">
| |
| − | <div class="item active">
| |
| − |
| |
| − | <div class="p">
| |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="item">
| |
| − |
| |
| − | <div class="p">
| |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="item">
| |
| − |
| |
| − | <div class="p">
| |
| − | We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you. We are team of creative photographers. We passionate with photography and other creative things. If you are looking professional photography theme with endless possibilities, you come in right place. This template consist of well-organized layers. Tons of features waiting for you.
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | console.log($('#carousel-demo'))
| |
| − | $('#carousel-demo').carousel();
| |
| − | </script>
| |
| − | </div>
| |
| − | </main>
| |
| | | | |
| | + | <div id="myCarousel" class="carousel slide"> |
| | + | <!-- 轮播（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> |
| | + | <!-- 轮播（Carousel）项目 --> |
| | + | <div class="carousel-inner"> |
| | + | <div class="item active"> |
| | + | <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> |
| | + | </div> |
| | + | <div class="item"> |
| | + | <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> |
| | + | </div> |
| | + | <div class="item"> |
| | + | <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> |
| | + | </div> |
| | + | </div> |
| | + | <!-- 轮播（Carousel）导航 --> |
| | + | <a class="carousel-control left" href="#myCarousel" |
| | + | data-slide="prev">‹</a> |
| | + | <a class="carousel-control right" href="#myCarousel" |
| | + | data-slide="next">›</a> |
| | + | </div> |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
