Bootstrap迁徙系列 - Navbar

Bootstrap迁移系列 - Navbar
在V2.3.2版本中一个标准的导航栏模版如下：
被移除的class
以下列出的页面元素已经在v3.0版本中被去除或修改。
页面元素从2.x版本中去除3.0版本中对应的元素Form actions.form-actionsN/ASearch form.form-searchN/AFluid container.container-fluid.container (no more fixed grid)Fluid row.row-fluid.row (no more fixed grid)Controls wrapper.controlsN/AControls row.controls-row.row or .form-groupNavbar inner.navbar-innerN/ANavbar vertical dividers.navbar .divider-verticalN/ADropdown submenu.dropdown-submenuN/ATab alignments.tabs-left .tabs-right.tabs-belowN/ANav lists.nav-list .nav-headerNo direct equivalent, but List groups and .panel-groups are similar.    其等同功能为：.collapse .navbar-collapse
    （3） brand
    .brand已经更名为.navbar-brand
    （4） nav
     .nav已经更名为.navbar-nav

    2.x实现的导航菜单


    代码：


    代码：
&lt;!DOCTYPE html&gt;  &lt;html&gt;    &lt;head&gt;      &lt;title&gt;控制面板&lt;/title&gt;      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;      &lt;!-- Bootstrap --&gt;      &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;    &lt;/head&gt; &lt;body&gt;&lt;nav class="navbar navbar-default navbar-inverse" role="navigation"&gt;&lt;div class="collapse navbar-collapse"&gt;&lt;a class="navbar-brand" href="#"&gt;首页&lt;/a&gt;&lt;ul class="nav navbar-nav"&gt;&lt;li class="active"&gt;&lt;a href="#"&gt;控制面板&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;用户管理&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;链接&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/nav&gt;    &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;    &lt;/body&gt;  &lt;/html&gt;
Bootstrap迁徙系列 - Navbar

热点推荐
