Основная цель этой статьи позволяет вам научиться использовать начальную загрузку в Twitter для создания сайта в течение 20 минут. Как построить сайт приведен ниже:
Основные шаблоны HTML
. Нам нужно использовать базовый шаблон HTML, чтобы мы могли включить необходимый файл начальной загрузки. Вот начало нашего проекта Bootstrap Twitter, скопируйте эти коды в файл и имя IT index.html.
<! Doctype html> <head> <title> Twitter Bootstrap Tutorial - учебник с отзывчивым макетом </title> <style type = 'text/css'> body {foanle -color: #ccc; } </style> </head> <body> </body> </html>В этом коде мы добавили несколько CSS, чтобы сделать фон страницы ярким серым, потому что таким образом мы можем легко увидеть различные столбцы в нашем дизайне, что облегчает понимание.
Представьте файл Bootstrap Twitter
Чтобы использовать начальную загрузку в Twitter, нам нужно только представить файл в наш шаблон. Есть много способов ввести файлы. Если вы хотите узнать эти методы, обратитесь к соответствующим документам.
Основываясь на отправной точке этого урока, мы представим файл Bootstrap-Combined.min.css через CDN без загрузки каких-либо файлов.
Кода-копия выглядит следующим образом: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel = "styleSheet">
Это позволяет CSS в Twitter Bootstrap вступить в силу в наших шаблонах.
Контейнер Bootstrap Twitter
Класс начальной загрузки контейнера очень полезен. Он может создать центрированную область на странице, а затем мы можем поместить содержимое других мест внутри. Класс контейнеров эквивалентен созданию центрированной коробки DIV со статической шириной и значением Magin Auto. Преимущество класса контейнеров в начальной загрузке в Твиттере заключается в том, что он отзывчив, и он рассчитывает наилучшую ширину на основе текущей ширины экрана для практических целей.
В теге тела используйте класс контейнеров, чтобы создать Div. Он будет служить основной внешней оберткой для других кодов на странице.
Если вы отрегулируете высоту этого Div и установите его цвет фона на белый, эффект, который вы видите, будет таким:
Название и навигация
Теперь, когда у нас есть место для добавления дополнительного HTML -кода, мы можем добавить текст заголовка, а затем создать основную навигационную панель для сайта.
Добавьте следующий текст или выбранную вами текст в тег DIV класса контейнеров.
<h1> Twitter Bootstrap Tutorial </h1>
Сейчас не так много нового, это просто название, давайте перейдем к более интересному аспекту навигации по начальной загрузке в Твиттере.
Bootstrap имеет класс NAV, который позволяет нам создавать различные навигационные элементы. Вы можете добавить следующий код после тега H1.
<div class = 'Navbar Navbar-enverse'> <div class = 'Nav-Collapse' style = "height: auto;"> <ul> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Page One </a> </li> <li> <a href = "#"> страница 2 </a> </li> <li> <a href = "#"> dive </li> </li> <li> <li> <a href = "#"#"> </a> </li> <li> <-href ="#"
В классах, связанных с NAVBAR, есть все стили навигационной панели. Добавление класса NAVBAR DEVERVERS будет применять крутой черный стиль, который является обычным комбинацией начальной загрузки в Твиттере. Я предлагаю расширить этот стиль, чтобы создать вашу уникальную навигацию. Но в этом уроке мы все равно будем использовать базовый стиль начальной загрузки.
В Div с классовой Navbar мы добавляем еще один дивинг с классовым навигационным заводом и добавляем встроенный стиль высота: Auto; Это говорит о начальной загрузке, что когда эта страница находится в окне браузера с шириной менее 970px, она обеспечит представление сжатого переключателя.
Если вы сохраните файл index.html и откроете его в браузере, вы сможете увидеть это изменение при настройке ширины окна браузера, как показано на рисунке.
Более 979 пексов
Менее 979px
Кроме того, мы можем добавить класс NAV в неупорядоченный элемент списка HTML, чтобы применить больше стилей из файла Bootstrap CSS, или мы можем добавить активный класс в элемент списка «Домашний».
Основной контент и боковая панель
Мы закончили основную навигацию сайта, и теперь нам нужно добавить основную область контента и боковую панель, чтобы поддержать больше ссылок или навигационных путей. Пожалуйста, добавьте следующий код в панель навигации.
<div id = 'content' class = 'row-fluid'> <div class = 'span9 main'> <h2> раздел основного контента </h2> </div> <div class = 'span3 боковая панель'> <h2> боковая панель </h2> </div> </div>
Это именно то, что нам нужно понять о растровой системе Bootstrap. Конечно, официальная документация по начальной загрузке охватывает более подробную информацию, но мы начнем с оснований и позволим вам лучше понять это.
Растровая система использует макет с 12 колоннами, что означает, что страница может быть разделена на 12 идентичных столбцов. Следующее изображение, полученное из официального документа Bootstrap, дает хороший дисплей.
В коде мы только что вставлены в панели навигации, вы можете увидеть классы с именем SPAN9 и SPAN3. Они разделят страницу на две части 9 столбцов слева и 3 столбца справа, образуя нашу область содержания и боковую панель. Одним из преимуществ использования растровой системы является то, что она динамически вычисляет ширину столбца на основе ширины окна, поэтому вам не нужно писать какие -либо медиа -запросы, чтобы ваш сайт работал в любой разрешении экрана.
Вы можете наблюдать их эффект, изменив количество пролетов и отрегулировав размер вашего браузера. Вы заметите, что когда область содержания составляет менее 724px, эти столбцы сложены вертикально.
Теперь мы размещаем следующий текст или любой другой текст за тегом H2 в основной области контента, просто чтобы немного удлинить страницу.
<p> lorem ipsum dolor sit amet, ascectetuer apiscing elit, sed diam nonumber nibh euuismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minimum wenia, Quis nostrud Упражнения Sta ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo exc retems. Duis Autem Vel Eum Iriure Dolor в hendrerit в вульпут -палсии Esse reystie, Vel illum dolore eu feugiat nulla farsilisis в vero eros et acmsan et iusto odio dignissim qui blandit guiltit lumtatum zzril delenit duis duis duis duis duis duis duis dolore tealilialia nullialia nulliaial NAM LIBER TIMERM CUM SOLUTA NOBIS ELEIFEND Опция конференция NIHIL Imperdiet Doming ID Quod Mazim Placerat Facer Porsim. </P>
<p> typi non habent clariitatem insitam; EST USUS LEGITIS в IIS QUI FACIT EORUM CLARIITATEM. Расследования демонстрируют, что Legende Quod II Legunt Saepius Clariitrous. Claritas est Etiam Dynamicus, Qui Sequencer Mutationem Consuetudium Legorum. Mirum est notare Quam Littera Gothica, Quam Nunc Putamus parum, Claram, Anteposuerit Litterarum формат HumanItatis на моря -кварта decima et Quinta decima. Eodem Modo Typi, Qui Nunc Nobis Videntur Parum Clari, Fiant Sollemnes in Futurum. </P>
Теперь сайт покажет следующее:
Навигация по боковой панели
Вы можете увидеть все элементы навигации, которые Twitter Bootstrap предоставляет нам здесь.
Мы будем использовать вертикальную вкладку для создания дополнительной области навигации. Скопируйте и вставьте следующий код в тег H2 боковой панели.
<ul> <li> <a href = '#'> Другая ссылка 1 </a> </li> <li> <a href = '#'> Другая ссылка 2 </a> </li> <li> <a href = '#'> Другая ссылка 3 </a> </li> </ul>
Это простой дисплей! Приведенный выше код буквально просто неупорядоченный список с классами NAV-Tabs и Nav-Stack, но он создает для нас панель навигации.
Глядя на последний эффект, страница, основанная на начальной загрузке в Twitter.
в заключение
Благодаря функциям, предоставляемым Twitter Bootstrap, мы дали этот очень быстрый базовый учебник по начальной загрузке, но уделяете некоторое время, чтобы практиковать и прочитать больше официальных документов, и вы скоро станете экспертом по начальной загрузке.
После прочтения этого учебника вы должны понять, как использовать растровые системы, основные принципы различных типов навигации и адаптивного дизайна.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.