Bootstrap: Быстрое создание современных сайтов. Тимур Машнин

me </label>

      </div>

      <button type=«submit» class=«btn btn-primary»> Submit </button>

      </form>

      </div>

      </div>

      </div>

      </div>

      С помощью класса class=«well well-sm» или класса class=«well well-lg» можно уменьшить или увеличить высоту well-контейнера соответственно:

      <div class=«well well-sm»> Small Well </div>

      <div class=«well»> Normal Well </div>

      <div class=«well well-lg»> Large Well </div>

      Bootstrap Alerts

      Bootstrap Alerts представляют собой не диалоговые окна с сообщениями, а выделенные цветом блоки текста на странице, которые, однако, имеют кнопку закрытия.

      Для создания сообщения Bootstrap Alert используется класс. alert с одним из четырех классов. alert-success,.alert-info,.alert-warning или. alert-danger, которые обеспечивают соответствующий цвет фона и шрифта текста.

      <div class=«alert alert-success»>

      <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

      <strong> Success! </strong> This alert box could indicate a successful or positive action.

      </div>

      <div class=«alert alert-info»>

      <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

      <strong> Info! </strong> This alert box could indicate a neutral informative change or action.

      </div>

      <div class=«alert alert-warning»>

      <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

      <strong> Warning! </strong> This alert box could indicate a warning that might need attention.

      </div>

      <div class=«alert alert-danger»>

      <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>

      <strong> Danger! </strong> This alert box could indicate a dangerous or potentially negative action.

      </div>

      Кнопку закрытия при этом обеспечивает элемент <a href=«#» class=«close» data-dismiss=«alert» aria-label=«close»> &times; </a>.

      Дополнительно класс class=«alert alert-success fade in» добавляет анимацию при закрытии сообщения.

      Нажатие кнопки закрытия можно обрабатывать с помощью Javascript.

      <div class=«alert alert-success» id=«myAlert»>

      <a href=«#» class=«close»> &times; </a>

      <strong> Success! </strong> This alert box could indicate a successful or positive action.

      </div>

      <script>

      $(document).ready (function () {

      $(".close").click (function () {

      $("#myAlert").alert («close»);

      });

      });

      </script>

      С помощью класса. alert-link вместо текста сообщения можно вставлять ссылку.

      <div class=«alert alert-info»>

      <a href=«#» class=«close» data-dismiss=«alert» aria-label = «close»> &times; </a>

      <a href = «#» class = «alert-link»> <strong> Info! </strong>

      This alert box could indicate a neutral informative change or action.

      </a>

      </div>

      Кнопки и группы кнопок

      Для создания стилизованной цветом кнопки используется класс. btn совместно с одним из классов. btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link.

      <button type=«button» class=«btn btn-default»> 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>

      <button type=«button» class=«btn btn-link»> Link </button>

      Вышеуказанные классы могут применяться для элементов <a>, <button>, <input>.

      <button type=«button» class=«btn btn-default»> Default </button>

      <input type=«button» class=«btn btn-primary» value=«Primary»> </input>

      <a type=«button» class=«btn btn-success»> Success </a>

      Дополнительно классы. btn-lg,.btn-md,.btn-sm,.btn-xs регулируют размер кнопки.

      <button type=«button» class=«btn btn-primary btn-lg»> Large </button>

      <button type=«button» class=«btn btn-primary btn-md»> Medium </button>

      <button type=«button» class=«btn btn-primary btn-sm»> Small </button>

      <button type=«button» class=«btn btn-primary btn-xs»> XSmall </button>

      Дополнительно класс. btn-block обеспечивает