Какво е Bootstrap

Bootstrapе платформа (framework), която е комбинация от HTML, CSS и JavaScript код.
Bootstrap напълно поддържа CSS3 и HTML5 и вече се превръща в стандарт за уеб разработки. 
Ползитеот него са:Bootstrap е съвместим с всички основни браузъри.Bootstrapсайтовете се адаптират много лесно за всякакви устройства. Използвайки комбинация от JavaScriptиCSS, Bootstrap позволява да се изпълни почти всеки елемент от дизайна, който е необходим за съответния проект.

  • Bootstrap е съвместим с всички основни браузъри.
  • Bootstrapсайтовете се адаптират много лесно за всякакви устройства.
  • Използвайки комбинация от JavaScriptиCSS, Bootstrap позволява да се изпълни почти всеки елемент от дизайна, който може да се изиска.

Как да използваме bootstrap 4 cdn

  • За да използваме компонентите на Bootstrap 4, трябва да импортираме CSS и JS файловете в нашето приложение. Най-бързият начин е да използваме Bootstrap 4 CDN (Content Delivery Network). За целта е необходимо в секцията <head><head> на HTML документа да добавим:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

или

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Също така, в края на HTML документа, между тагове <script></script> е необходимо да добавим JavaScript библиотеките, необходими на Bootstrap,  като спазваме посочения тук ред:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>

Можем да използваме следния код като стартов шаблон:

<!doctype html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- следващият таг гарантира, че страницата ще се визуализира коректно на мобилни телефони и че ще можем да увеличаваме мащаба.
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    
    <title>Bootstrap 4 CDN Template</title>
  </head>
  <body>

    <!--Съдържание на документа -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
  </body>
</html>

Втори начин да използваме Bootstrap e да изтеглим необходимите файлове (можем да го направим от тук), след което да ги импортваме в документа както е посочено по-горе, но трябва да укажем локалния път до тях:

<!-- for css -->
<link rel="stylesheet" href="path/to/file/bootstrap.min.css">

<!-- for javascript -->
<script type="text/javascript" src="path/to/file/bootstrap.min.js"></script>

Пример: как би изглеждал един HTML документ, със и без Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
    <title>Hello, world!</title>
  </head>
  <body>
    <h4>Heading</h4>
    <h1>Hello, World!</h1>

    <h4>Paragraph</h4>
    <p>This is a paragraph.</p>

    <h4>Link</h4>
    <a href="#a">This is a link!</a>

    <h4>Table</h4>
    <table>
    <caption>
      This is an example table, and this is its caption to describe the contents.
    </caption>
    <thead>
      <tr>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody> 
    </table>

    <h4>List</h4>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li
    </ul>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>

ето как изглежда документа без (вляво) и с включен bootstrap (вдясно)