Уроки по программированию

Уроки Bootstrap 3.0 для начинающих (Первый урок)

По многочисленным просьбам, посетителей моего сайта открываю новую рубрику уроки Bootstrap 3.0. Для изучения Bootstrap 3.0. нам понадобится его скачать с официального сайта, там кстати есть вся информация для того чтобы начать работать, но она на английском языке.

Приступаем.

Шаг 1. Идем на официальный сайт и качаем Bootstrap 3.0 — вот ссылка http://getbootstrap.com/getting-started/ (качать то что выделено красным прямоугольником)

bootstrap

Шаг 2. Содержимое архива извлекаем заходим во внутрь папки dist создаем файл index.html желательно использовать кодировку utf-8

tree-bootstrap-3-0

Шаг 3. Открываем созданный файл и прописываем следующий код

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

Сохраняем код который прописали и щелкаем index.html. После запуска index.html увидим следующее

first-lesson

Продолжение во втором уроке.
для тех кто не понял где и как выкладываю архив — Скачать

Ссылки на уроки:

1. Второй урок
2. Третий урок
3. Четвертый урок

Комментарии к статье

  • Аватарка 24.11.2013
    Ответить Мандыч Игорь

    Привет! Есть проблемка.
    Итак, есть обучающая система, а-ля МУДЛ. Пользователи делают лабораторки, загружают свои результаты в личные кабинеты (прикрепляют к заданию).
    Но проблема в том, что они берут логин/пароль одногруппников и тянут себе выполненные лабы одногруппников. Вот задача в том, чтобы пресечь этот беспредел!

    Я вот уже начал думать о каком-то универсальном комментарии, который будет скрыт в любом типе файлов….но как его организовать, чтобы он одинаково не отображался в html, doc, xml,vb, exe????
    Может подкинете идею? Я прятал в имени файла ид юзера…..но это легко решить, переименовав файл….
    не смог задать вопрос в соответствующей форме, там выдает ошибку

    • Аватарка 26.11.2013

      Здесь нужно больше информации напишите мне на почту или в скайп идею обязательно подкину только надо до конца понять что нужно.
      skype tttsergey
      mail support@pro-cod.ru

    • Аватарка 26.11.2013

      Здравствуйте, обязательно помогу с идеей, но нужно больше информации свяжитесь со мной через скайп или почту (skype tttsergey) (почта support@pro-cod.ru )

  • Аватарка 26.11.2013
    Ответить Мандыч Игорь

    Привет! Есть проблемка.
    Итак, есть обучающая система, а-ля МУДЛ. Пользователи делают лабораторки, загружают свои результаты в личные кабинеты (прикрепляют к заданию).
    Но проблема в том, что они берут логин/пароль одногруппников и тянут себе выполненные лабы одногруппников. Вот задача в том, чтобы пресечь этот беспредел!

    Я вот уже начал думать о каком-то универсальном комментарии, который будет скрыт в любом типе файлов….но как его организовать, чтобы он одинаково не отображался в html, doc, xml,vb, exe????
    Может подкинете идею? Я прятал в имени файла ид юзера…..но это легко решить, переименовав файл….
    не смог задать вопрос в соответствующей форме, там выдает ошибку

  • Аватарка 08.01.2014
    Ответить Антон

    По поводу строчек


    и

    ни слова.
    В последнем понятно, что правильно должно быть «http://code.jquery.com/jquery.js»
    А файлы html5shiv.js и respond.min.js в комплекте бутстрап отсутствуют… Где?

    • Аватарка 08.01.2014

      Можно скачать архив распаковать и проверить код на работоспособность. Если вы ищите не достающие файлы html5shiv.js, respond.min.js, то в обновленной версии Bootstrap их разместили на сервере и для того чтобы обратится к ним теперь нужно прописывать

  • Аватарка 24.02.2014

    а где задается цвет фона контейнера и цвет фона самой страницы?
    bootstrap.min.css?

    • Аватарка 25.02.2014

      Для того чтобы добавить цвет лучше использовать дополнительный стиль например

      в файле css надо добавить стиль

      .moicvet {
      background:#000;
      }

      стиль можно добавить в bootstrap.min.css, но я обычно создаю свой файл стилей и размещаю свой стили туда.
      Подключить свой файл стилей можно в шапке.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *