На официальном сайте Bootstrap предоставляется компонент навигационной панели:
Просто поместите JQ и Bootstrap в папку сайта и введите следующий код:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Navbar </title> <meta name = "viewport" content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src="js/bootstrap.js"></script> </head> <body> <div> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <pan> </span> <pan> </span> </button> <a href = "#"> бренд </a> </div> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#"> link </a> </li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> data-toggle = "Выпадающий"> выпадающий в раскрытие <PRAN> </span> </a> <ul> <a href = "#" data-toggle = "Выпадение"> выпадает <pan> </span> </a> <ul role = "menu"> <li> <a href = "#"> action </hre> </li> </li> <li> <li> <a href = "#> jref ="#" href = "#"> что -то еще здесь </a> </li> <li> </li> <li> <a href = "#"> разделенная ссылка </a> </li> <li> </li> <li> <a href = "#"> разделенная ссылка </a> </li> <li> </li> <li> <a href = "#"> One Speat Link> li> </li> <li> <href = "#"> One Spet Link> li> </li> <li> <li> <href = " </ul> </form rol = "search"> <div> <input type = "text" Placeholder = "search"> </div> <button Type = "propect"> отправить </button> </form> <ul> <li> <a href = "#"> link </a> </li> <li> <a href = "#" data-toggle = "uppowdowd"> deplowding> </span> </span> </span> </span> </span> </span> </span> </span> </li> <a href = "#"#"> </li> <li> <a href ="#"#" role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li></li> <li> <a href="#">Separated link</a> </li> </li> </li> </li> </ul> </div> </div> </nav> asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
Вы можете получить навигационную панель, которая может варьироваться в зависимости от размера окна:
Вы также можете изменить значение класса в <NAV ROLE = "Navigation"> на <NAV ROLE = "navigation">, а навигационная строка будет повесена в верхней части веб -страницы. Независимо от того, как окно перетаскивается, если вы измените значение класса на <nav rol = "navigation">, вы можете получить черную навигационную панель.
Это выглядит очень полезно, но его недостатки довольно смертельны. Независимо от цветов, предоставленных этой навигационной панелью, являются только белыми и черными, два цвета. Самое ужасное, что навигационная панель отображается непосредственно на телефоне в IE8, но он находится ниже разрешения экрана 1440x900. Вы должны знать, что IE8 не IE6, но браузер по умолчанию для системы Win7.
Это заставляет пользователя выбрать элемент на панели навигации, чтобы нажать кнопку справа, а затем раскрывающийся меню становится:
Пусть контент веб -страницы будет снят непосредственно на целую часть. Стоит отметить, что IE8 - браузер по умолчанию для Win7. Независимо от абсолютной основной позиции IE6 в Китае, даже в контексте все большего количества пользователей, выбирающих Win7, совместимость IE8 по -прежнему стоит рассмотреть вопрос.
Поэтому, если вы можете выбрать только этот вид навигационной панели в качестве навигации веб -сайта, есть два типа начальной загрузки, которые можно использовать в качестве заменителя, с разными стилями, один - это страница вкладок, а другой - группа кнопок. Так называемая навигационная панель для хлебной крошки не является хорошим решением, потому что раскрывающееся меню должно быть представлено в начальной загрузке в качестве кнопки. Если он записан в тексте, это также неблагодарно в IE8. Конечно, вы можете полностью отложить в сторону начальную загрузку, а CSS Мастера сами по себе написано и смотрит на кадр.
1. Страница тега
Основной стиль тега заключается в следующем, и есть раскрывающееся меню, которое требует поддержки от Bootstrap.js, Bootstrap.css и JQ.
Страницы тегов не меняются с размером браузера
Вы можете переключаться на одной веб -странице или перейти на другие страницы. Ссылки на странице вкладок, которые вы настоятельно рекомендуете для навигации, будут прыгать на другие веб -страницы с тем же макетом, что и эта страница. То есть эта вкладка также существует и имеет то же место.
Код заключается в следующем:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> togglabletabs </title> <meta name = "viewport"/> content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src = "js/bootstrap.js"> </script> </head> <body> <div> <ul rol = "tablest"> <!-Только один тег может иметь активный статус в теге-> <li role = "Presentation"> <!-Я думал, что это не рекомендуется пропустить на домашнюю страницу, потому что, если вы напишите ее на одну страницу, одна страница, одну страницу, одна страница будет принять участие в Home-re-re-re-re-re-re-re-re-le. ROLE = "Tab" Data-toggle = "Tab"> Home </a> </li> <li role = "presentation"> <a href = "#profile" rol = "tab" data-toggle = "tab"> профиль </a> </li> <li role = "presentation"> <a href = "##profile rol =" tabgle = "tabgle ="> Profil </a> </href = "##" li Presentation = "li? href = "#Сообщения" rol = "tab" data-toggle = "tab"> Сообщения </a> </li> <li role = "presentation"> <a href = "#settings" rol = "tab" data-toggle = "вкладка"> Настройки </a> </li> <!-включая способ написания раскрывающегося Menu-> <li kolue = "> <a Data-tog-tog-tog-tog-tog-tog"? <!-Это маленький треугольник выпадающего меню-> выпадающий в раскрывающую очередь <PRAN> </span> </a> <ul rol = "menu"> <li role = "Presentation"> <a href = "#home" role = "tab" data-toggle = "tab"> home </a> </li> <li role = "> <a href ="#worn "role" role "role" role ". data-toggle = "tab"> profile </a> </li> <li role = "presentation"> <a href = "#сообщений" role = "tab" data-toggle = "tab"> Сообщения </a> </li> <li role = "Presentation"> <a href = "#settings" rol = "tab" toggle = ">"> «В таблице»> </li </li> </li> </li </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> На других страницах с тем же стилем, заставляя зрителей чувствовать, что нет прыжков. Таким образом, разделяйте код так, чтобы код веб-страницы не был сосредоточен на одной странице-> <li role = "presentation"> <a href = "back.html" rol = "tab"> Другие страницы </a> </li> </li> </ul> <! -> <div> <div rol = "tabpanel" id = "home"> home </div> <div rol = "tabpanel" id = "profile"> profile </div> <div role = "tabpanel" id = "Сообщения"> Сообщения </div> <div role = "tabpanel" id = "Настройки"> Настройки </div> </div> </div> </hody "id ="> </HTML> </HTML> </HTML>
2. Выберите группу кнопок
Этот абзац снова и снова изменялся, главным образом потому, что мое понимание этого компонента недостаточно тщательно.
Основной стиль группы кнопки выбора, которая охватывает страницу, заключается в следующем:
Это изменится с размером браузера. Конечно, когда он сжат до крайности, он не будет закрыт, как навигационный шар, который поставляется с начальной загрузкой, и тихо лежать в кнопке.
Эта группа кнопок выбора, несомненно, совместима с IE8, но группа кнопок без раскрывающегося меню на самом деле является гиперссылкой, используя тег <a> вместо тега <tood>, но по сравнению с общим тегом <a>, см. Код для кнопки на классе этого тега <a>, см. Код для деталей. Код для этой группы кнопок действительно особенный.
Конкретный код заключается в следующем:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <название> Кнопка группы кнопок </title> <meta name = "Viewport" content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src="js/bootstrap.js"></script> </head> <body> <!--Require button group to fill the entire page--> <div> <div> <!--Write buttons that do not have a drop-down menu to write this way, it is rare to define links for buttons, please note --> <a href="#"> Left </a> </div> <div> <button type="button"> Middle </button> </div> <div> <button type = "button"> right </button> </div> <!-Напишите эту кнопку с раскрывающимся меню-> <div> <button Type = "Кнопка" Data-toggle = "Выпадающий"> выпадающий <pran> </span> </button> <ul ROLE = "MENU" href = "#"> выпадающая ссылка </a> </li> </ul> </div> </div> </body> </html>
3. Добавьте таблицу на панели и встроенный с обычным текстом гиперссылки
Наиболее распространенные и самые простые вещи часто являются самыми практическими вещами, но здесь используются таблицы для макета вместо того, чтобы разделить страницу на систему сетки из 12 человек. Потому что 12 копий столкнулись с некоторыми столбцами, такими как 5 экземпляров, было нелегко распределить равномерно.
Эта панель использует элементы панели, предоставляемые Bootstrap, которые также можно автоматически регулировать в соответствии с размером окна.
Код намного проще, чем два решения выше, но одновременно не так ослепительно. Но это действительно просто и практично.
<!-Этот узел можно игнорировать. Он помещается в контейнер-контейнер только для скриншотов и не будет заполнять все окно-> <viv> <!-Панель только тела, изменяя стиль только изменяет цвет границы-> <div> <div style = "text-align: center"> <table> <tr> <!-Если это шесть пунктов, вы можете использовать растровую систему Bootstrap, в каждом столбце есть 2 Grids. Если это семь пунктов, то ячейка будет составлять 100/7 = 14% от размера. -> <Td> <a hRef = "#"> Project 1 </a> </td> <td> <a href = "#"> Project 2 </a> </td> <td> <a href = "#"> Project 3 </a> </td> <td> <a href = "#"> Project 4 </a> </td> <a href = "#"> </a> </td> <a href = "#"> 5 </a> </td> </table> </div> </div> </div>
Три вышеуказанных решения представляют собой решения для решения дефектов навигационной навигационной навигационной навигации в IE8. Я лично думаю, что первый тип немного редко и альтернативен, второй тип - наиболее рекомендуемый автора, и в форме необходимо использовать третий тип. Если вы можете избежать этого, постарайтесь избежать этого. Вы можете разместить группу кнопок выбора на панели, чтобы заменить третий тип текста и содержимого таблицы.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.