English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
bootstrap 的学习非常简单，并且它所提供的样式又非常精美。只要稍微简单的学习就可以制作出漂亮的页面。
bootstrap中文网：http://v3.bootcss.com/
bootstrap提供了三种类型的下载：
用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
Bootstrap 源码
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。
Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
其实我们不用下载bootstrap也可以使用它：
Bootstrap 中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。
base.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Указанные 3 meta-тега *обязательны* быть в начале, любая другая информация *обязательна* следовать за ними! --> <title>Шаблон Bootstrap 101</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>Привет, Bootstrap!</h1> <!-- jQuery (необходим для JavaScript-плагинов Bootstrap) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Включить все скомпилированные плагины (ниже), или включать отдельные файлы по мере необходимости --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body> </html>
Bootstrap уже включен в base.html, сохраните его, и вы сможете использовать стили, предоставляемые Bootstrap.
Иконки шрифта
Bootstrap по умолчанию предоставляет более двухсот иконок. Мы можем использовать эти иконки с помощью тега span:
<h3>Иконка</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
Кнопка
Тег <button></button> используется для создания кнопок, bootstrap предоставляет разнообразные стили кнопок. <h3>Кнопка</h3> <button type="button" class="btn btn-default">кнопка</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <h3>Размеры кнопки</h3> <button type="button" class="btn btn-default">кнопка</button> <button type="button" class="btn btn-primary btn-lg">primary</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-info btn-xs">info</button> <h3>Включите значок в кнопку</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Кнопка</button>
Кнопки, кроме стандартных размеров, bootstrap предоставляет три параметра для настройки размера кнопки: btn-lg, btn-sm и btn-xs.
Выпадающее меню
Выпадающее меню является одним из самых распространенных интерактивов, bootstrap предоставляет красивые стили.
<h3>Выпадающее меню</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Дропдаун
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Действие</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Другое действие</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Здесь что-то другое</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Отдельная ссылка</a></li>
</ul>
</div>
Ввод
С помощью тега <input></input> создается ввод.
<h3>输入框</h3> <div class="input-group"> <span class="glyphicon glyphicon-user"></span> <input type="text" placeholder="username"> </div> <div class="input-group"> <span class="glyphicon glyphicon-lock"></span> <input type="password" placeholder="password"> </div>
Меню навигации
Меню навигации необходимо для ориентации на сайте в целом.
<h3>Меню навигации</h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакт</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Развернуть <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Действие</a></li>
<li><a href="#">Другое действие</a></li>
<li class="divider"></li>
<li class="dropdown-header">Заголовок навигации</li>
<li><a href="#">Отдельная ссылка</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Форма
Перемещение данных между человеком и системой необходимо выполнять через форму. Например, передача данных для регистрации/входа, подача условий запроса и т.д. Форму можно создать с помощью тегов <form></form>.
<h3>表单</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Warning box
Warning box is an important means for the system to convey information to users and provide guidance. Without specific tags for warning boxes, beautiful warning boxes can be created instantly with the styles provided by Bootstrap.
<h3>Warning box</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">success!</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">info!</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">предупреждение!</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">опасно!</a>
</div>
Лента прогресса
Процесс обработки системы часто требует ожидания от пользователя, лента прогресса позволяет пользователю осознавать процесс обработки системы, что увеличивает терпимость.
<h3>Лента прогресса</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
</div>
</div>
Вот и все, что есть в этой статье, надеюсь, это поможет вам в изучении, и希望大家多多支持呐喊教程。
Если вы хотите углубить свои знания, вы можете нажать здесь, чтобы изучить, и вот две精彩的 темы: учебник Bootstrap, практический учебник Bootstrap
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не был отредактирован вручную, и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. В случае подтверждения, сайт немедленно удалят подозрительное нарушение авторских прав.