Bootstrap——导航条的设置和下拉菜单详细注释
PublishedCreated: 2017年1月24日星期二 14:30:28 views(1893)
今天的就先了解一下导航条和下拉菜单的制作，手写了一个小案例，把笔记写在了注释之中，这样看起来比较清晰明了。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>学PHP的小蚂蚁的博客</title> <!-- Bootstrap --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style type="text/css"> body{ padding-top: 70px; } </style> </head> <body> <!-- navbar 定义了这是一个导航条，它会应用导航条的样式。 navbar-default表明引用的是一个默认导航条样式。 navbar-fixed-top将导航条固定在页面的顶部，不会随着滚动条上移 navbar-inverse将现在默认样式的灰色，改为黑色，根据个人审美自定义哈 role='navigation' 指明这就是一个导航 --> <nav class='navbar navbar-default navbar-fixed-top navbar-inverse' role="navigation"> <!-- 这里的类，可以使用.container和.container-fluid两种写法，那么这两种写法有什么区别呢? container代表导航条自适应浏览器大小布局，container-fluid代表固定宽度布局。 --> <div> <!-- navbar-header 导航条的头部，就是最右侧的小方块按钮啦 --> <div> <!-- 小方块按钮 navbar-toggle collapsed可以切换折叠 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <!-- 小方块中间的小横线，添加三个比较美观，自定义也行 --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- .navbar-brand 导航条的品牌？？ 其实可以理解为本网页或者网站的名称了，当然这个导航的名称也是可以的，对，就是个名称！ --> <a href="http://my.oschina.net/woshixiaomayi/blog">学PHP的小蚂蚁博客</a> </div> <!-- 这里就是导航的列表栏目了 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- 导航列表，包含了所有应该出现的栏目。 这里和上面的那个button按钮是对应的，当浏览器小于一定比例，这里就会消失，button就会出现， 从而实现了响应式布局 --> <ul class="nav navbar-nav"> <!-- .dropdown 栏目的下拉菜单 --> <li> <!-- .dropdown-toggle 下拉菜单的切换 .caret 一个向下的小图片 --> <a href="#" data-toggle="dropdown">PHP<span></span></a> <!-- .dropdown-menu 这里是一个下拉菜单 --> <ul role='menu'> <li><a href="#">cURL</a></li> <li><a href="#">正则</a></li> <li><a href="#">性能优化</a></li> </ul> </li> <li><a href="#">Mysql</a></li> <li><a href="#">Linux</a></li> </ul> </div> </div> </nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> .