Bootstrap: создание веб-страницы
Далее давайте создадим простую адаптивную веб-страницу с помощью Bootstrap 3.
Перед изучением можно взглянуть на результат:https://www.example.com/try/demo_source/bootstrap3-makewebsite.htm
HTML-код
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Моя первая страница Bootstrap</h1>
<p>Измените размер окна браузера, чтобы увидеть результат!</p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Название сайта</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Обо мне</h2>
<h5>Мои фото:</h5>
<div class="fakeimg">Вставьте изображение сюда</div>
<p>Введение обо мне..</p>
<h3>Ссылки</h3>
<p>Текст описания.</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
<div class="col-sm-8">
<h2>Заголовок</h2>
<h5>Подзаголовок</h5>
<div class="fakeimg">Изображение</div>
<p>Какой-то текст..</p>
<p>Пример, то, что вы изучаете, — это не только технологии, но и мечты!!! Пример, то, что вы изучаете, — это не только технологии, но и мечты!!! Пример, то, что вы изучаете, — это не только технологии, но и мечты!!!</p>
<br>
<h2>Заголовок</h2>
<h5>Подзаголовок</h5>
<div class="fakeimg">Изображение</div>
<p>Какой-то текст..</p>
<p>Пример: то, что вы изучаете, — это не только технологии, но и мечты!!! Пример: то, что вы изучаете, — это не только технологии, но и мечты!!! Пример: то, что вы изучаете, — это не только технологии, но и мечты!!!</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Содержимое нижнего колонтитула</p>
</div>
Попробуйте »