Напишите впереди
В этой статье я расскажу об использовании начальной загрузки на основе ландшафтной веб -страницы, которую я сделал. Скриншоты веб -страницы следующие:
Эффекты и код полной веб -страницы могут быть просмотрены здесь или просмотрены на Codepen. Основные эффекты, которые должны достичь веб -страниц, включают следующее:
1. Кнопки для входа и регистрации в навигационной панели появляются после нажатия по входу в систему и модальные поля регистрации, а также могут быть переключены входные и регистрационные окна. Бар меню реагирует
2. Варианты ландшафта в навигационной панели могут быть сняты. Нажмите на пещеру для водного занавеса Jiuzhaigou Lijiang в раскрывающемся списке, чтобы найти соответствующую вкладку.
3. Карусель с крупным экраном карусели
4. Нажмите, чтобы переключить на вкладке страницу
Теперь мы начинаем принимать начальную загрузку.
Я считаю, что друзья слышали о начальной загрузке или использовали его. На этой веб -странице я использую CDN Bootstrap v3.3.4. Нажмите здесь, чтобы загрузить последнюю версию Bootstrap v3.3.5 или нажмите здесь, чтобы загрузить ее на официальном веб -сайте. Я считаю, что всегда есть тот, который подходит вам ~~~~~~
В этой статье давайте сначала поговорим о навигационном баре.
Навигационная планка
Перед использованием BS вы должны сначала обратиться к BS, включая CSS и JS. Справочный метод очень прост, так же, как ссылка на обычные внешние файлы. Вы можете использовать ссылки на CDN или поместить их в локальные ссылки. Код приведен ниже.
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge"> <Metament = "Viewport" Content = "wilth = width Device, начальный шкал = 1"> <Title> Landscape </title> <Link> "stink relewee" landscape </title> "lindshee-e-lindheet"> " href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim и response.js для IE8 поддержки элементов HTML5 и медиа-Queries-> <!-WARNING: JS не работает, если вы смотрите на страницу по файлу файла! 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/reanp.js/1.4.2/resp.min.min. <! [endif]-> </head> <!-jquery (необходимо для плагинов Javascript's Javascript)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
В этом примере ландшафтной веб -страницы я использую ссылку CDN.
В то же время, поскольку плагин BS основан на JQ, также должен быть введен JQ.
Сначала дайте полный код навигационной панели
<Vav> <div> <!-бренд и переключатель Get Get для лучшего мобильного дисплея-> <div> <button type = "button" toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <pran> навигация по поводу </span> <pan> </span> </span> <pan> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> href = "#"> определить торговую марку самостоятельно </a> </div> <!-навигация в верхнем левом углу-> <div Id = "Bs-Example-navbar-collapse-1"> <ul> <li> <a href = "#"> Homepage <pan> (текущий) </span> </a> </li> <li> <a href = "#"#"#"#"#"#" ROLE = "Button" aria-Expaded = "false"> Screenery <pran> </span> </a> <ul rol = "menu"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> <a href = "#lijiang"> lijiang </li> <li> <a href = "#lijiang"> href = "#shuilianong"> пещера Shuijian </a> </li> <li> </li> <li> <a href = "#shuilianandong"> shuijian cave </a> </li> <li> </li> <li> <a href = "#"> больше .. </i> </li> </li> <li> <a href = "#"> больше .. </i> </li> </li> <li> data-target = "#о"> <a href = "#"> о </a> </li> </ul> <form rol = "search"> <div> <input type = "text" Placeholder = "Поиск аттракционов .."> <tood Type = "Кнопка"> go </button> </div> </form> <ul> <li-toggle = "modal" data-target = "###### id = "signin-button"> <a href = "#"> login </a> </li> <li data-toggle = "modal" data-target = "#signin-signup-tab" id = "chind-button"> <a href = "#"> регистрация </a> </li> </ul> </div> </div> </nav>
Навигационные компоненты BS все полагаются на один и тот же класс нав, и код объясняется отдельно. Давайте сначала посмотрим на этот абзац:
<button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <pran> навигация по переключению </span> <pan> </span> <span> </span> <pran> </span> </button>
Цель этого кода состоит в том, чтобы уменьшить просмотр, параметры меню в панели навигации будут разрушаться, щелкнуть значок обрушения, а параметры меню на панели навигации будут организованы вертикально. Класс .Navbar нежелательный в NAV -это обратный цвет. Друзья могут удалить класс .Navbar нежелательный , чтобы наблюдать за эффектом. Поскольку я черный контроль, я использую инвертированный цвет здесь. Если вы хотите использовать другие цвета, богатое золото, друзья могут сравниться с ними в соответствии со своим собственным вкусом. Класс бренда .Navbar может быть использован для определения торговой марки вашего собственного веб-сайта. Я сам использую текст, чтобы определить товарку здесь. Заинтересованные друзья могут добавить свой собственный логотип. Класс .
Как следует из названия , класс .
Атрибуты данных
Здесь необходимо поговорить об атрибуте данных BS. В BS разработчики могут использовать все плагины JS в BS только через атрибуты данных. Это первоклассный API в BS, который часто является нашим предпочтительным способом использования плагинов JS. Например, данные data-toggle = "collapsse" и data-toggle = "раскрывающийся список" в приведенном выше коде-это способы использования плагинов JS в BS.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено все об этой статье, я надеюсь, что для всех будет полезно изучить навигационную панель Bootstrap.