Twitter Bootstrap Tutorial — Обработка сложных дизайнов

Там должны быть две отдельные колонны, стоящие рядом. Теперь вы должны подумать о дополнительном div-обертке, который я добавил выше с классом «row». Ну, причина в том, что классы span * по умолчанию плавают влево. Чтобы заставить оба столбца присутствовать под всем содержимым выше, мы добавили div «row». Он действует как традиционный ряд таблиц <tr>. Теперь вы должны удалить фиктивные элементы абзаца из вашего кода. Теперь мы заполним левый столбец списком навигации.

Для списка навигации вы должны следовать следующей разметке.

 <ul class="nav nav-list">
    <li class="nav-header">What we are?</li>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Our Clients</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li class="nav-header">Our Friend</li>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo!</a></li>
    <li><a href="#">Bing</a></li>
    <li><a href="#">Microsoft</a></li>
    <li><a href="#">Gadgetic World</a></li>
</ul>

Вы должны добавить класс «nav-list» в дополнение к классу «nav», который будет выглядеть как список. Добавление класса «nav-header» к любому элементу «li» класса «nav» сделает его похожим на заголовок раздела ссылок. Идите и посмотрите, как это выглядит в браузере.

Переходя к области содержимого, мы будем просто заполнять ее общими тегами h3 и тегами абзаца. Никаких дополнительных классов не требуется, так как мы хотим, чтобы они появлялись один под другим. Ниже приведен код, который я буду размещать внутри «span8».

 <h3>How we started ?</h3>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<h3>How do we market?</h3>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

Обновите ваш браузер, и теперь он должен выглядеть следующим образом:

Как видите, мы очень близки к достижению нашего окончательного дизайна. Мы просто остались с нижней частью.

Для нижнего колонтитула мы снова разделим «строку» на три части, как вы можете видеть на демонстрационной странице. На этот раз деление будет делиться на равные части, что составляет «span4». Таким образом, мы создадим еще один div «row» чуть ниже div «row» вышеуказанной левой боковой панели и области содержимого. Следуйте приведенному ниже коду:

 <div class="row">
<div class="span4">
		<h4 class="muted text-center">Meet Our Clients</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn"><i class="icon-user"></i> Our Clients</a>
	</div>
	<div class="span4">
		<h4 class="muted text-center">Know Our Employees</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Our Employees</a>
	</div>
	<div class="span4">
		<h4 class="muted text-center">Reach Us</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn btn-info">Contact Us</a>
	</div>
</div>

Достаточно просто! Мы разделили строку на три равные части, используя класс span4, а затем заполнили каждую из них, используя теги h4, теги абзацев и ссылки, похожие на кнопки. Проверьте вывод в вашем браузере. Вы должны видеть маленькие изображения внутри кнопок ссылок, Наши клиенты и Наши сотрудники. Вы должны воспользоваться помощью тега <i> и добавить соответствующие классы изображений, такие как icon-user, icon-star, icon-glass и т. Д. Чтобы изменить значок на белый, используйте class icon-white вместе с icon-user и icon-star классы. Полный список классов значков можно найти в документации Bootstrap здесь .

Чтобы обеспечить небольшой интервал между областью нижнего колонтитула и указанным выше содержимым, мы добавим тег <hr> между каждым элементом div «row». Вставьте тег <hr> и сравните его с демонстрационной страницей.

Теперь для области авторских прав мы добавим следующий код:

 <hr>
<div class="footer">
<p>&copy; 2013</p>
</div>

Итак, наконец, мы создали простую, но приличную целевую страницу, используя исключительно среду Bootstrap Twitter.

 @import url("bootstrap.min.css");

 <table class="table">
 	<tr>
		<td></td>
		<td></td>
</tr>
…..
</table>

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="icon-th-large"></i> Drop Down
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
    </ul>
</li>