dir.by  
  Поиск  
Компьютер, программы
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов
 Bootstrap скачиваем 
посмотрели 7151 раз
обновлено: 10 января 2019
Скачивать Bootstrap файлы нужно с официального сайта http://getbootstrap.com
Версия Bootstrap
Размер
Где скачать ?
bootstrap-4.1.3-dist.zip

Архив содержит файлы:
js
        bootstrap.js
        bootstrap.bundle.js
        bootstrap.bundle.min.js
        bootstrap.min.js

css
        bootstrap.css
        bootstrap-grid.css
        bootstrap-grid.min.css
        bootstrap-reboot.css
        bootstrap-reboot.min.css
        bootstrap.min.css
623 kb
Подключить Bootstrap
Так как Bootstrap использует библиотеку jQuery то сначала нужно скачать и подключить библиотеку jQuery ...
Потом подключаем библиотеку Bootstrap:
Описание
Как подключать ?
Подключить библиотеку Bootstrap в страницу HTML
1) Скачать bootstrap-4.1.3-dist.zip к себе на компьютер и распаковать
2) Создайте новый файл 1.html
3) Внутри файла 1.html подключите Bootstrap
  Html  
<!-- подключить библиотеку Bootstrap (js файл) -->
<script src="./bootstrap-4.1.3-dist/bootstrap-4.1.3/js/bootstrap.min.js"></script>

<!-- подключить библиотеку Bootstrap (css файл) -->
<link rel="stylesheet" href="./bootstrap-4.1.3-dist/css/bootstrap.min.css">

Подключить библиотеку Bootstrap в приложении ASP.NET MVC
1) Скачиваем библиотеку Bootstrap используя утилиту NuGet в Visual Studio

2) Подключить Bootstrap в View
  cshtml  
<link href='@Url.Content("~/Content/bootstrap.min.css")' rel="stylesheet" type="text/css" />
<script src='@Url.Content("~/Scripts/bootstrap.min.js")'></script>

Подробнее: Bootstrap в ASP.NET MVC...
Пример (Подключить библиотеку Bootstrap в страницу HTML)
  Html  
<html>

     <!-- заголовок -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <!-- страница -->
     <body>
          <!-- подключить библиотеку jQuery -->
          <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

          <!-- подключить библиотеку Bootstrap (js файл) -->
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>

          <!-- подключить библиотеку Bootstrap (css файл) -->
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

          <!-- HTML элементы -->
          <form>
               <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" style='width:300px;' class="form-control" id="email">
               </div>
               <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input type="password" style='width:300px;' class="form-control" id="pwd">
               </div>
               <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
               </div>
               <button type="submit" class="btn btn-default">Submit</button>
          </form>
     </body>

</html>
Пример смотрим, тестируем
На заметку
Если использовать стили Bootstrap 3 и подключаете библиотеку Bootstrap 4 тогда не все будет работать правильно (Например: navbar плохо работал ).
 
← Предыдущая тема
Что такое Bootstrap?
 
Следующая тема →
Контейнеры в Bootstrap ("container-fluid" и "container")
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Что такое Bootstrap?
Bootstrap где скачать и как подключить?
Контейнеры в Bootstrap ("container-fluid" и "container")
Bootstrap версия 4.0
Bootstrap 4 отличие от Bootstrap 3
элементы
"Navbar" в Bootstrap 4.0 - это главное горизонтальное меню для сайта (навигационные заголовки)
стили
class="form-inline" элементы на одной строке | Bootstrap 4.0
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
class="mr-auto" отодвинуть в правый край , class="ml-auto" отодвинуть в левый край | Bootstrap 4.0
Отступы по вертикали, горизонтали | Bootstrap 4.0
для изучения
WEB Сайты для изучения Bootstrap 4.0
Bootstrap элементы для версии 3 и 4
Создание сетки "col-md-число" в Bootstrap 3 и Bootstrap 4
WWW сайты для изучения Bootstrap
Сайты для изучения Bootstrap

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика