`

前端菜单栏和幻灯片

 
阅读更多

bootstrap（版本3.0）源码中的例子有菜单栏和幻灯片的实现

网页模版

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Note there is no responsive meta tag here -->

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>template</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9: sogou 360 mathon...]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="index.css" rel="stylesheet">
  </head>

  <body>
  	<h1>Content</h1>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

样式css如下

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
	padding-bottom: 40px;
	color: #5a5a5a;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
	position: relative;
	z-index: 15;
	margin-top: 20px;
}

.navbar-wrapper .container .navbar {
	border-radius: 6px; /*圆角弧度*/
}


.carousel .item {
	height: 500px;
	background-color: #777;
}

.list-group-item {
	border: none;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
	.navbar-wrapper {
		margin-top: 20px;
	}
}

网页代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Note there is no responsive meta tag here -->

  <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

  <title>模版</title>

  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9: sogou 360 mathon...]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->

  <!-- Custom styles for this template -->
  <link href="index.css" rel="stylesheet">
</head>
  <body>
    <div class="navbar-wrapper">
     <div class="container">
      <div class="navbar navbar-default">
       <div class="container">
        <div class="navbar-header">
         <a href="#" class="navbar-brand">Youku Tudou</a>	
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#hot">Hot</a></li>
            <li><a href="#new">Recent Video</a></li>
            <li class="dropdown">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Catalog<b class="caret"></b></a>
             <ul class="dropdown-menu" style="width:600px; height:400px; overflow:hidden">
               <li>
                <div class="row">
                 <div class="col-md-6">
                   <ul class="list-unstyled">
                    <li class="list-group-item">Movie</li>
                    <li class="list-group-item">Game</li>
                    <li class="list-group-item">News</li>
                    <li class="list-group-item">Last 7 Days</li>
                    <li class="list-group-item">Last One Month</li>
                  </ul>
                </div>
                <div class="col-md-6"><img src="a.jpg"/></div>
              </div>
            </li>
            <li><table class="table table-bordered">
            </table><li>
          </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<b class="caret"></b></a>
       <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li><a href="#">Contact US</a></li>
  </ul>
</div>
</div>
</div>
</div>
</div>

<div id="myCarousel" class="carousel slide">
  <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">
    <div class="item active">
      <img src="a.jpg" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
          <p>One is always on a strange road, watching strange scenery and listening to strange music. Then one day, <br /> you will find that the things you try hard to forget are already gone.</p>
          <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="b.jpg" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another example headline.</h1>
          <p>Happiness is not about being immortal nor having food or rights in one's hand. It’s about having each tiny wish come true, or having something to eat when you are hungry or having someone's love when you need love. </p>
          <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="c.jpg" data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more for good measure.</h1>
          <p>Love is a lamp, while friendship is the shadow. When the lamp is off,you will find the shadow everywhere. Friend is who can give you strength at last.</p>
          <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

 效果如下：


 

 

 

  • 大小: 40.1 KB
分享到：
| 琐碎的学习——接触html5开发
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics