Bootstrap 导航条.pdfVIP

Bootstrap 导航条 Bootstrap 导航条 简介 使⽤ Bootstrap ，您可以创建静态的导航条。在本教程中将教您如何做到这点。 我们将使⽤⼀个 有内容的 HTML5 页⾯，并看看如何添加⼀个头部导航条。下⾯是 最后的输出结果： 下⾯是不 任何内容的页⾯的 HTML5 代码。 !DOCTYPE html html lang=quot;enquot; head meta charset=quot;utf- quot; titleBootstrap Basic Tab Based Navigation Example/title meta name=quot;descriptionquot; content=quot;Bootstrap Basic link href=quot;../bootstrap/twitter-bootstrap-v2/docs/assets/c /head body !-- We will create navbar here -- /body /html 为了创建包含导航的基本结构，您需要在上⾯显⽰的 HTML5 代码中，紧跟着 标签的 后边插⼊下⾯的代码： div class=navbar navbar-fixed-top div class=navbar-inner div class=container !--navigation does here-- /div /div /div 现在，让我们把 替换为下⾯的代码，⽤来创建导航的第⼀个集合。请注意，这⾥的 brand class 以不同的⽅式呈现，这可以⽤来呈现您的公司名称或组织名称。 ul class=nav li class=active a class=brand href=#w3cschool/a /li lia href=#About/a/li lia href=#Portfolio/a/li lia href=#Contact/a/li /ul 如果需要创建下拉菜单，需要紧跟着在最后⼀个代码块中显⽰的 HTML 代码后，插⼊ 下⾯的代码。 ul class=nav li class=dropdown a href=# class=dropdown-toggle data-toggle=dropdown Services b class=caret/b /a ul class=dropdown-menu lia href=#Web Design/a/li lia href=#Web development/a/li lia href=#Wordpress Theme development/a/li /ul /li /ul 但是，由于 Bootstrap 下拉菜单需要⽤到 JavaScript ，所以您需要在 HTML 页⾯中插⼊ 下⾯两⾏代码。您可以把它们插⼊到 标签前⾯。 script src=../bootstrap/twitter-bootstrap-v2/docs/assets/js/jque script src=../bootstrap/twitter-bootstrap-v2/docs/assets/js/boot 如果要向导航条中插⼊⼀个搜索表单，只需在包含下拉菜单列表的 ul 后，插⼊下 ⾯的代码。请注意，class pull-left 是靠左对齐搜索表单。如果您想要靠右对齐，请 使⽤ pull-right class 。 form class=navbar-search pull-left input type=text class=search-query placeholder=Search /form 现在，我们想要项导航条中插⼊交互按钮，位于导航条的右部。我们将插⼊ oogle Plus、Facebook Like 和 Tweet 按钮。您需要在搜索表单的后边插⼊下⾯的代码。 ul class=nav pull-right li class=dropdown a href=# class=dropdown-toggle d