Твиттер Учебник по начальной загрузке
Задача
Самая популярная из оболочек внешнего интерфейса, Twitter Bootstrap, вышла в третьей версии (v3.0.0). Это учебное пособие по начальной загрузке Twitter для начинающих поможет вам начать работу с Twitter Bootstrap 3. Если вы уже использовали Bootstrap ранее, это познакомит вас с новыми функциями, поставляемыми с версией.
Вы также узнаете, как настроить готовые функции фреймворка, используя сетки для создания макета, создания навигации с помощью навигации, создания раскрывающихся списков, использования carousal, добавления сторонних сотрудников, таких как встраивание социальных плагинов и Google Map и многое другое. В итоге мы создадим работающий адаптивный веб-сайт и изучим некоторые нюансы фреймворка.
Примеры начальной загрузки
Чтобы обеспечить вам лучшее понимание, мы явно скомпилировали большое количество примеров Bootstrap помимо тех, которые включены в учебные пособия. Вы можете просмотреть код, просмотреть демо-версию и поиграть с кодом онлайн самостоятельно.
Что такое твиттер
Twitter Bootstrap - это интерфейсная среда для быстрой разработки веб-приложений и сайтов. В современной веб-разработке есть несколько компонентов, которые требуются практически во всех веб-проектах. Bootstrap предоставляет вам все эти основные модули - Сетка, Типография, Таблицы, Формы, Кнопки и Отзывчивость. Кроме того, есть множество других полезных интерфейсных компонентов, таких как выпадающие списки, навигация, модалы, заголовки, разбиение на страницы, карусель, крошка, вкладка, миниатюры, заголовки и т. Д. С их помощью вы можете быстро и легко создать и запустить веб-проект. ,
Более того, поскольку весь фреймворк основан на модуле, вы можете настроить его со своим собственным битом CSS или даже перейти к полной перестройке после начала работы.
Он основан на нескольких лучших практиках, и мы считаем, что начинать изучение современной веб-разработки с HTML и JavaScript / Jquery очень полезно, если вы знаете основы.
Хотя есть критика, что все проекты, созданные Bootstrap, выглядят одинаково, и вы можете создать сайт без особых знаний HTML + CSS, мы должны понимать, что Bootstrap является универсальной структурой и, как и любой другой универсальный материал, вам нужно настроить его так, чтобы смотреть это исключительно. И вам нужно доработать, когда вы на пути к его настройке, а это невозможно без хорошего понимания HTML + CSS.
Конечно, помимо начальной загрузки есть очень хорошие интерфейсные среды, и это зависит от выбора разработчика. Но это определенно стоит попробовать.
Почему вы используете Twitter Bootstrap в своих проектах ? И если вы используете его впервые, изучите его вместе с нами и сообщите нам свое мнение .
W3resource имеет существующую серию Twitter Bootstrap Tutorial, подробно обсуждающую фреймворк. Мы обновим всю серию до последней версии 3.0.0 и добавим больше полезного контента и примеров. Пожалуйста, подпишитесь на нашу ленту, чтобы оставаться в курсе.
Скачать и понять структуру файла
Загрузить Bootstrap версии 3.0.0 можно по адресу https://github.com/twbs/bootstrap/archive/v3.0.0.zip (полная версия) или https://github.com/twbs/bootstrap/releases/download/v3. 0.0 / bootstrap-3.0.0-dist.zip (короткий). Мы использовали первый, но вы можете использовать и второй.
Кроме того, наш код, который был загружен, содержит папку с кодом начальной загрузки, загруженную по первой ссылке. Он также содержит файл custom.css, который мы использовали для настройки оригинального CSS Bootstrap .
После распаковки вы обнаружите, что в корневой папке bootstrap-3.0.0 доступно несколько файлов и папок.
Основные CSS-файлы - bootstrap.css и его минимизированная версия bootstrap-min.css доступны в папке «css», которая находится в папке «dist» в bootstrap-3.0.0.
В 'dist' есть папка 'js', которая содержит основной файл JavaScript bootstrap.js и его уменьшенную версию.
В корне есть отдельная папка 'js', которая содержит разные плагины JavaScript в отдельных файлах.
Другая папка 'js' находится в папке 'assets' в корневом каталоге. Он содержит html5shiv.js, который является HTML5-шимом и используется для поддержки IE8. Существует также файл response.min.js, используемый для поддержки медиазапросов в IE8. Эта папка также содержит jquery.js, от которого зависят js-плагины Bootstrap.
В этой же папке находится папка «ico», содержащая значки для значков и значки для различных мобильных устройств.
Папка 'css' по тому же пути содержит файлы css для документации.
Папка «_include» и «_layouts» содержит некоторые файлы структуры макета по умолчанию, которые могут быть полезны для быстрого создания прототипов.
Папка 'less' в корневом каталоге содержит несколько файлов .less. Если вы собираетесь заниматься менее основанной разработкой, эти файлы вам пригодятся.
В корневой папке. там лежит несколько файлов. Некоторые из них представляют собой файлы HTML, которые можно использовать для создания базовых прототипов. Кроме того, есть bower.json, browserstack.json, используемый для компиляции на основе Bower. Есть также composer.json и YAML-файл _config.yml.
Помимо загрузки по указанной ссылке, вы также можете скомпилировать все CSS, js файлы с помощью следующей команды -
$ bower install bootstrap
Вы можете клонировать репозиторий Bootstrap's Git
git clone git: //github.com/twbs/bootstrap.git
Для этого урока мы просто скачали Zip-файл и будем работать над этим.
После того, как вы закончите этот урок, мы рекомендуем вам установить его вместе с Bower и сообщить нам, как он работает.
NetDNA содержит скомпилированную и свернутую версию Bootstrap CSS, Js и дополнительной темы CSS. Вы можете включить их как следующие
<! - Последние скомпилированные и минимизированные CSS -> <link rel = "stylesheet" href = "// netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <! - Необязательная тема -> <link rel = "stylesheet" href = "// netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <! - Последний скомпилированный и свернутый JavaScript -> <script src = "// netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"> </ script>
Разработка с Bootstrap v3.0.0
Основной HTML
Ниже приведена основная структура HTML, которую мы будем использовать для нашего проекта.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
Обратите внимание, что html5shiv.js и response.min.js добавлены в этот шаблон для поддержки IE8. Добавление этих файлов в Bootstrap версии 3.
Мы поместили папку bootstrap-3.0.0 в папку twitter-bootstrap, которая находится в корне нашего веб-сервера. Все HTML-файлы, которые мы будем создавать, будут помещены в папку twitter-bootstrap. Целью заявления является не что иное, как облегчить процесс развертывания.
настройка
Мы собираемся настроить стили CSS Bootstrap . Итак, не нарушая оригинальный CSS-файл, который находится в папке dist загрузочного загрузчика 3.0.0, мы собираемся создать отдельный CSS-файл с именем custom.css в той же папке. Затем мы включим этот CSS-файл в наши HTML-файлы только ниже оригинального CSS-файла. Таким образом, мы сможем переопределить стили по умолчанию, когда вы захотите, но, если Bootstrap обновляется сам, оригинальный файл CSS также может обновляться, не нарушая нашу собственную настройку. Мы предлагаем вам следовать этому методу и в процессе разработки.
Создание навигации
Для создания навигации добавим следующий код в наш HTML-файл, сразу после открывающего тега body.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
<li class="active"><a href="#">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
Для навигации Bootstrap использует класс navbar на уровне контейнера. Таким образом, он назначен элементу nav, который содержит всю навигацию.
Мы использовали класс navbar-inverse вместе с тем, чтобы изменить цвет панели навигации по умолчанию на темный вместо цвета по умолчанию. Класс navbar-fixed-top гарантирует, что навигационная панель остается фиксированной в верхней позиции, когда мы прокручиваем нашу HTML-страницу.
Использование role = "navigation" является новым в Bootstrap V3.0.0 при создании навигации . Bootstrap рекомендует использовать это для навигационных панелей в целях доступности .
На данный момент мы добавили 'padding-top: 80px;' к телу в файле custom.css. Число пикселей, которые вы добавляете в качестве верхнего отступа к телу, может изменяться, но если вы не сделаете этого, верхняя часть нашего контента после панели навигации будет скрыта.
В контейнере nav у нас есть неупорядоченный список с классами 'nav' и 'navbar-nav'. В этом неупорядоченном списке. каждый элемент списка содержит ссылку в навигации.
Класс navbar-brand используется для представления названия бренда. Мы использовали изображение для этого. Так как высота нашего изображения больше, чем высота строки панели навигации, мы сделали некоторые настройки здесь. Мы увеличили свойство line-height для '.navbar-nav> li> a' до 50px вместо значения по умолчанию 20px. Мы также сделали размер шрифта 16px.
Для самой правой ссылки мы добавили выпадающий список. Для этого класса dropdown добавляется в связанный li, сразу после этого добавляется привязка, имеющая два класса dropdown-toggle и caret. Этот якорь на самом деле содержит социальный якорный текст в нашем проекте. Затем этот li содержит неупорядоченный список в этом и снова каждый элемент списка этого вложенного списка содержит ссылку, представленную в раскрывающемся списке.
Мы добавили социальные плагины в раскрывающемся списке. Первый li содержит разметку для Google Plus, второй li содержит разметку для Facebook, а третий li содержит разметку и некоторый js-скрипт для отображения кнопки Twitter.
Кроме того, вы должны добавить следующую разметку и скрипт сразу после открывающего тега body, чтобы кнопка Facebook работала
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src ="//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Чтобы кнопка Twitter работала, мы добавили следующий скрипт непосредственно перед закрывающим тегом body
(function() {
var po = document.createElement('script'); po.type ='text/javascript'; po.async = true;
po.src ='https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Мы использовали следующий стиль для добавления некоторых кнопок социальных сетей с классом «социальные сети»
.socials {
padding: 10px;
}
Это завершает нашу навигацию.
Создание слайд-шоу с каруселью
Для создания слайд-шоу чуть ниже панели навигации, на главной странице нашего проекта. мы будем использовать следующую разметку
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
В Карусале четыре части. Основной контейнер определяется с помощью тега div, и ему назначается класс 'carousel slide'.
Затем есть упорядоченный список, имеющий связанный с ним класс «карусель-индикаторы». Каждый элемент списка в этой ол относится к слайду. Класс «активный» назначен слайду, который загружается по умолчанию при загрузке страницы. При визуализации вы можете видеть их в виде маленьких кружочков чуть ниже заголовка.
Затем каждый слайд (изображение) помещается в тег div и ему присваивается класс 'item'. Каждый из этих элементов снова вкладывает div с назначенным ему классом 'carousel-caption'. Карусель-заголовок содержит некоторую разметку, которая отображается в виде подписи вместе с изображением. У нас есть h1 и кнопка, заключенная в абзац, но у вас может быть собственная разметка.
Последняя часть предназначена для следующей предыдущей и слайд / слайд по элементу управления. Это определяется с использованием 'left' и 'carousel-control' для предыдущего и 'right' и 'carousel-control' для следующего.
Классы icon-prev и icon-next используются для следующих и предыдущих значков.
Мы сделали некоторые настройки в карусели по умолчанию . Мы хотели, чтобы заголовки, индикаторы и значки «следующий / предыдущий» отображались на несколько пикселей выше их положения по умолчанию.
Для этого мы добавили следующие стили в наш файл custom.css
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
Мы также настроили h1, добавив к нему нижнее поле в 30 пикселей.
h1 {
margin-bottom: 30px
}
Адаптивное изображение
Возможно, вы уже заметили, что для каждого из изображений в слайд-шоу мы использовали класс img-responseive. Это новая функция в Bootstrap v3.0.0. Используя класс img-responseive вместе с тегом img, Bootstrap делает изображения отзывчивыми .
Создание сетки
Ниже слайд-шоу мы разместили наш контент с использованием сеток. Мы открыли сетку с помощью div с классом 'container'. Обратите внимание, что мы собираемся разработать адаптивный веб-сайт, и в отличие от предыдущих версий Bootstrap, здесь у нас есть один класс для контейнера, и он является адаптивным по умолчанию.
Контейнер div содержит число элементов div (три в первом ряду и шесть во втором ряду) с классом 'row', связанным с ними, для создания строк сетки Bootstrap.
Каждая строка содержит div с классом col-xy для создания столбцов. Значение x может быть xs для мобильных устройств, sm для планшетов, md для ноутбуков и небольших настольных экранов и lg для больших настольных экранов. это требует мобильного первого подхода. Значение y может быть любым положительным целым числом, но общее количество столбцов в сетке не должно превышать 12. В нашем проекте мы использовали lg для простоты, но, поскольку мы сделали это, у вас может быть сложный опыт, пока просмотр сайта проекта в мобильном телефоне или планшете.
Через пару дней у нас будет полное руководство по Grid-системе Twitter Bootstrap V3.0.0, и там мы рассмотрим его удивительные возможности реагирования.
В этом примере мы хотели три столбца равной ширины в нашей первой строке, поэтому мы использовали 'col-lg-4' для всех столбцов. Во втором ряду мы сделали это 'col-lg-2', так как мы хотели шесть столбцов.
Ниже приведена разметка для сетки, содержащей две строки, первая строка имеет три столбца, а вторая строка состоит из шести столбцов.
<div class="row barone">
<div class="col-lg-2">
<p><img src="/images/w3resourcelogo.gif"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/java.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/postgresql.png"></p>
</div>
</div>
Мы закончили сетку с часами и нижним колонтитулом со следующей разметкой
<hr>
<p>[email protected] by ToDo App.</p>
Использование таблиц
На странице price.html нашего проекта мы используем таблицу для отображения таблицы цен. Мы использовали следующую разметку
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
</tr>
</tbody>
</table>
Используются два класса 'table' и 'table-borderled', которые являются стандартными по умолчанию в исходном css-файле Bootstrap. Но мы внесли некоторые изменения, чтобы заголовки таблиц выглядели иначе , добавив следующую css в наш файл customize.css
th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Используя значки
Мы использовали класс 'badge' для отображения некоторых текстов в нашей таблице. Мы настроили класс значка также со следующим CSS
.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}
Для этой страницы и страницы contact.html мы добавили еще одно правило css в customize.css
.container > h1 {
text-align: center;
}
Это делает центр выравнивания h1.
Используя форму
В файле contact.html мы создали три столбца, а в первом столбце - встроенный элемент from. Мы использовали стили по умолчанию для этого.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
Класс form-horizontal размещает элементы управления формы горизонтально. Обратите внимание, что для доступности добавлена role = "form". Это новая функция версии 3.0.0.
Для размещения каждого элемента формы Bootstrap 3.0.0 использует новый класс 'form-group'.
Во втором столбце таблицы на этой странице мы просто разместили текст.
Добавление карты Google
В третьем столбце сетки на странице contact.html мы добавили Google Map. Для этого мы использовали следующую разметку
<div id="map_canvas"></div>
</div>
И следующий js, который был добавлен вверху HTML-файл в голове
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
И вы должны добавить следующий тег сценария перед указанным JS
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Вы должны добавить следующий стиль в custom.css, чтобы карта отображалась правильно
#map_canvas {
width: 400px;
height: 400px;
}
Так мы создали наш первый простой проект на основе Twitter Bootstrap V3.0.0. Но мы только поцарапали поверхность. В этой серии мы обновим все имеющееся у нас учебное руководство по загрузке Twitter до версии 3.0.0, исследуя новые методы и настройки.
Вопросы? Предложения? Хвастовство? Присоединяйтесь к обсуждению ниже. Для предстоящих уроков, пожалуйста, подпишитесь на наш канал .
Новый контент: Composer: менеджер зависимостей для PHP , R программирования