Phil Kulin (schors) wrote,
Phil Kulin
schors

Что есть Twitter Bootstrap

Для чайников типа меня.
Twitter Bootstrap - набор готовых .js и .css файлов, которые содержат описания кнопочек, менюшек, разметок и прочих мелочей. Сайт http://getbootstrap.com/
К сожалению родной Getting Started там никакой. Ни один пример не работает из коробки.

Давайте просто посмотрим. Внизу приведён код, который надо просто скопировать в какой-нибудь файл и открыть браузером.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Hello World</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <ul>
        <ul class="nav nav-pills">
        <li class="active"><a href="#">Главная</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
      <div class="page-header">
        <h1>Bootstrap <small>hello, world!</small></h1>
      </div>
      <div class="row">
         <div class="col-md-6">
            <p>Hello,</p>
            <button type="button" class="btn btn-default">Подробнее</button>
         </div>
         <div class="col-md-6">
            <p>World!</p>
            <button type="button" class="btn btn-success">Подробнее</button>
         </div>
      </div>
    </div>
    <!-- jQuery (необходим для JavaScript плагинов) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Bootstrap JavaScript-->
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </body>
</html>
Что дальше? А дальше вставьте перед </head> вот эту строку:
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
И ещё раз посмотрите. Что дальше? Дальше - дерзайте. Предлагаю начать с последовательного сверху внизх прочтения ссылок (и опробования): http://getbootstrap.com/css/ http://getbootstrap.com/components/ http://getbootstrap.com/javascript/ Сразу предупреждаю - примеры даны неаккуратно, придётся экспериментировать. Лучше запомните :) P.S. Это была памятка для себя
Tags: bootstrap, css, get started, html
Subscribe
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 7 comments