twitter-bootstrap-3Начало работы с twitter-bootstrap-3


замечания

Bootstrap - это бесплатная и открытая веб-платформа для разработки веб-сайтов и веб-приложений. Он содержит шаблоны дизайна на основе HTML и CSS для типографики, форм, кнопок, навигации и других компонентов интерфейса, а также дополнительные расширения JavaScript. В отличие от многих веб-фреймворков, он относится только к интерфейсной разработке.

Bootstrap - второй по величине проект GitHub с почти 100 000 звезд и почти 45 000 вилок.

Версии

Версия Дата выхода
3.3.7 2016-07-25

Установка Bootstrap и начало работы

Вступление
Итак, вы хотите начать использовать загрузку для своего проекта? Большой! то давайте начнем прямо сейчас !.

Что такое бутстрап? Bootstrap - это библиотека с открытым исходным кодом, которую вы можете использовать для создания замечательных чутких проектов с использованием гибкого дизайна и простого кода. Отзывчивый дизайн - это философия дизайна, в которой при проектировании системы (представление и макет) отвечает / адаптируется в зависимости от компоновки устройства. Основная причина того, что ваш дизайн реагирует, - это увеличить доступность вашего приложения к более крупной пользовательской базе с использованием множества устройств.
Монтаж
Bootstrap может быть установлен по-разному и для разных проектов. В приведенном ниже списке я разместил ссылки для загрузки и учебника о том, как установить загрузку
Ссылки для скачивания

Основная информация
Таким образом, вы уже установили загрузку в свой проект. И теперь пришло время начать использовать большие преимущества бутстрапа. Сначала я расскажу вам о базовом использовании бутстрапа, после чего я покажу несколько небольших примеров, и в конце я дам вам пример кода запуска, который вы можете использовать в качестве стартового шаблона!

Сетка
Bootstrap использует сетку. Эта система сетки обычно состоит из 12 столбцов. Каждый из этих 12 столбцов имеет одинаковую ширину, но может иметь разную высоту.

Итак, у нас есть сетчатая система, состоящая из 12 столбцов. Мы можем использовать эти столбцы для создания нашего базового веб-сайта. скажем, что мы хотим достичь следующего макета:

меню - полная ширина
боковая панель - 1/3 экрана
Основное содержание 2/3 экрана
Нижний колонтитул - полная ширина

Меню
Сначала мы рассмотрим меню. Как известно, сетевая система работает с 12 столбцами. Поскольку мы хотим, чтобы меню было на полной ширине, мы должны поместить меню во все 12 столбцов. Он будет выглядеть следующим образом:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

Предоставляя меню класс col-lg-12, мы указываем следующее:
col - Col в имени класса обозначает столбцы.
lg - lg в имени класса обозначает ширину экрана, в данном случае большую.
12 - 12 в имени класса - это количество столбцов, которые мы хотим получить в нашем меню. поскольку в этом случае мы хотим, чтобы меню на полной ширине получило все 12 столбцов (12/12)

Поскольку мы использовали 12 из 12 столбцов для нашего меню, все, после того как меню будет установлено в новой строке.

Боковая панель
Второй элемент, который мы хотим добавить в наш шаблон, - это боковая панель. Теперь, как я сказал, мы хотим, чтобы боковая панель была на 1/3 экрана. Итак, что мы собираемся сделать, разделите 12 столбцов на 3, которые равны 4. Теперь мы знаем, сколько столбцов мы хотим заполнить, чтобы достичь 1/3 экрана. Следуйте приведенному ниже коду.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

То же, что и в меню только сейчас, наш номер col отличается от меню.
col - Col в имени класса обозначает столбцы.
lg - lg в имени класса обозначает ширину экрана, в данном случае большую.
4 - 12 в имени класса означает количество столбцов, которые мы хотим, чтобы наша боковая панель была доступна. так как в этом случае мы хотим, чтобы боковая панель заполняла 1/3 экрана, поэтому мы будем захватывать только 4 из 12 столбцов (4/12)

Содержимое
Теперь в этой строке у нас осталось 8 столбцов, расположенных рядом с нашей боковой панелью. Итак, теперь мы собираемся заполнить их содержанием. См. Примерный код ниже

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

Теперь, когда мы заполнили оставшиеся 8 столбцов из наших 12 столбцов в этой строке, следующий раздел снова начнется с новой строки с 12 столбцами.

Нижний колонтитул
Нижний колонтитул, опять же, как меню будет блоком полной ширины на экране, поэтому мы возьмем все 12 столбцов в этой строке для нашего нижнего колонтитула, см. Пример кода ниже.

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

Итак, теперь мы создали с очень маленьким html-файлом наш первый шаблон начальной загрузки. Но это самые основы. Обычно мы формировали бы этот код немного больше, чтобы дать ему полный опыт загрузки. Некоторые из этих опытов описаны ниже.

Использование строк и контейнеров Как я сказал в простом примере выше bootstrap использует строки из 12 столбцов. когда строка заполняется 12 столбцами, бутстрап начнется в новой строке. лучший способ показать эти строки - использовать классы строк. Мы также будем использовать контейнерный класс. это как тег тела, в этом контейнере мы поместим весь наш код. Вы можете выбирать между контейнером или классом контейнер-жидкость. Единственное отличие состоит в том, что класс контейнер-жидкость использует полную ширину экрана, а класс контейнера - нет. Пример этих основных функций приведен ниже.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

Итак, теперь мы создали полный шаблон страницы с загрузкой. Это очень просто, но начинайте с основ, а позже вы сможете использовать всевозможные классы начальной загрузки и функциональные возможности. Последнее. Имена столбцов lg-md-sm и xs соответствуют, как я сказал ширине страницы. LarGe, MeDium, SMall и XSmall. Не забывайте, что вы можете использовать это для равномерного разбиения на столбцы по-разному на разных ширинах, меняя количество столбцов. Помните, что полная строка состоит из 12 столбцов!

Для получения дополнительной информации посетите: http://getbootstrap.com/ <br? Для больших примеров посетите: http://expo.getbootstrap.com или http://bootsnipp.com/

Если вы хотите, чтобы я добавил дополнительную информацию или вы столкнулись с некоторыми проблемами, пожалуйста, дайте мне знать! и счастливое кодирование для всех вас!

Привет, мир

На следующей странице HTML показана простая страница Hello World, использующая Bootstrap 3 .

Страница содержит навигационную панель полной ширины с примерами ссылок и выпадающим элементом управления. Навигационная панель использует первые возможности Mobile Bootstrap. Он начинает свертываться в мобильных представлениях и становится горизонтальным по мере увеличения ширины видового экрана.

Кроме того, для отображения отображаемой информации использовался элемент jumbotron .

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

Монтаж

использование

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

Ссылка на файл bootstrap js производится с использованием тега сценария непосредственно над тегом body (см. Ниже). Также обратите внимание, что bootstrap использует jQuery для большинства его виджетов - например, аккордеонной карусели и т. Д., Так что ссылку bootstrap js файл под jQuery js-файлом.

**Образец**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>