twitter-bootstrap учебник
Начало работы с twitter-bootstrap

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

замечания

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

Bootstrap может быть полезен по следующим причинам:

Экономия времени . В Bootstrap есть много вещей, которые предварительно построены, и их просто нужно называть при написании кода. Это экономит значительное количество времени и может значительно сократить время, необходимое для кодирования веб-сайта.
Построенный с учетом адаптивного веб-дизайна : Bootstrap позволяет веб-разработчикам не беспокоиться о создании вещей, которые будут масштабироваться с размером их экрана, так как Bootstrap использует мобильный, первый отзывчивый дизайн, который позволяет им создавать вещи, которые будут работать на любом экране размер.
Упрощает процесс проектирования : Bootstrap поставляется заранее с элементами, которые имеют хорошие методы проектирования. Это может быть полезно для тех, чьи навыки веб-дизайна не так велики или для тех, кто рассматривает дизайн как утомительную задачу, так как многие из классов Bootstrap эстетически приятны и замечательны.

В этом разделе должны быть указаны любые большие темы в twitter-bootstrap и ссылки на связанные темы. Поскольку Документация для twitter-bootstrap является новой, вам может потребоваться создать начальные версии этих связанных тем.

Версии

Версия	Дата выхода
4,0	2999-01-01
3.3.7	2016-07-25
3.3.6	2015-11-24
3.3.5	2015-06-15
3.3.4	2015-03-16
3.3.1	2014-11-12
3.3.0	2014-10-29
3.2.0	2014-06-26
3.1.0	2014-01-30
3.0	2013-08-19
2,3	2013-02-07
2,2	2012-10-29
2,1	2012-08-20
2,0	2012-02-01
1,0	2011-08-18

Установка / настройка

Загрузка:

Загрузите Bootstrap прямо или клонировать и т. Д. Из репозитория GitHub
Загрузите настроенную версию Bootstrap из официальных документов
Устанавливать с помощью колокольчика: bower install bootstrap
Установить с npm: npm install bootstrap
Установить с композитором: composer require twbs/bootstrap

Структура файла

Установка:

В HTML-странице можно включить CSS, JS Bootstrap и зависимость jQuery (предварительная версия 3, по крайней мере, с последней версией Bootstrap). Обратите внимание, что если вы планируете использовать функции JavaScript Bootstrap, ваша ссылка jQuery должна появиться перед ссылкой bootstrap.js в вашем HTML.

Вы можете использовать установленные файлы Bootstrap из приведенного выше раздела или ссылаться на CDN, предоставленные создателями Bootstrap (ссылки, взятые из « Начало работы с Bootstrap» ):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Очень простая веб-страница Bootstrap:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Основной шаблон

<!DOCTYPE html>
<html lang="en">
  
    <head>
        
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
        
        <title>Bootstrap 101 Template</title>  <!-- The title of the Website -->


        <!-- Reference to Bootstrap's CSS file -->
        <!-- This is the line to reference the bootstrap's Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet"> 


        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!-- [if lt IE 9] -->
         <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <!--[endif]-->
  

    </head>
  
    <body>
    
        <h1>Hello, world!</h1>

        <!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    

        <!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
        <!-- (Necessary to run Bootstrap) -->
        <script src="js/bootstrap.min.js"></script>
  

    </body>
</html>

Когда использовать Bootstrap

Bootstrap - это самоуверенная структура для HTML, CSS и Javascript. Он содержит базовый стиль и функциональность для того, что стало принятым элементами [User Interface], например элементами формы, кнопками, модальными окнами и элементами навигации.

Bootstrap - это адаптивная веб-инфраструктура, то есть она предназначена для адаптации макета и дизайна для размеров экрана больших и малых размеров, таких как мобильные устройства, планшеты и настольные компьютеры, все в одной базе кода.

Одной из основных концепций Bootstrap является структура сетки. Применяя классы к элементам HTML, можно создавать сложные макеты, используя базовую сетку из двенадцати столбцов. Например, расположение четырех столбцов может адаптироваться к двум столбцам на планшетных устройствах и одному столбцу на мобильных устройствах. Для достижения этого сетка использует media queries , метод CSS для таргетинга на конкретные размеры экрана.

Bootstrap работает особенно хорошо, если:

Пользовательский дизайн не является главным приоритетом
Вам удобнее редактировать HTML и добавлять классы, чем создавать пользовательский CSS
Вам удобнее использовать фреймворк, который будет иметь много визуальных сходств со многими другими веб-сайтами

Bootstrap может использоваться теми, кто не знаком с HTML, CSS и Javascript, поскольку документация отличная. Тем не менее, есть кривая обучения для тех, кто не совсем устраивает три основные технологии, используемые Bootstrap (HTML, CSS и Javascript).

Можно приобрести или загрузить темы Bootstrap, чтобы изменить стиль или функциональность Bootstrap. Также возможно использовать Bootstrap в качестве отправной точки, с настройкой CSS и Javascript.

Основная веб-страница с использованием компонентов начальной загрузки

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
     <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</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 class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    
        <div class="container">

          <div class="jumbotron">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>
    
        </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow