dir.by  
  Search  
Programming, development, testing
Bootstrap - buttons, menus, dialog, slider ... Containers for placing elements
Bootstrap where to download and how to connect?
  Looked at 6400 times    
 Bootstrap Download 
last updated: 10 January 2019
Download Bootstrap Files needed from the official website http://getbootstrap.com
Version Bootstrap
Size
Where to download ?
bootstrap-4.1.3-dist.zip

The archive contains the following files:
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
Connect Bootstrap
Since Bootstrap uses the library jQuery then first need to download and connect the library jQuery ...
Then connect the library Bootstrap:
Description
How to connect ?
Connect Library Bootstrap to page HTML
1) Download bootstrap-4.1.3-dist.zip to your computer and unpack
2) Create a new file 1.html
3) Inside the file 1.html Connect Bootstrap
  Html  
<!-- connect library Bootstrap (js file) -->
<script src="./bootstrap-4.1.3-dist/bootstrap-4.1.3/js/bootstrap.min.js"></script>

<!-- connect library Bootstrap (css file) -->
<link rel="stylesheet" href="./bootstrap-4.1.3-dist/css/bootstrap.min.css">

Connect Library Bootstrap in the app ASP.NET MVC
1) Download the library Bootstrap using the utility NuGet in the Visual Studio

2) Connect Bootstrap in the View
  cshtml  
<link href='@Url.Content("~/Content/bootstrap.min.css")' rel="stylesheet" type="text/css" />
<script src='@Url.Content("~/Scripts/bootstrap.min.js")'></script>

Learn more: Bootstrap in ASP.NET MVC...
Example (Connect Library Bootstrap to page HTML)
  Html  
<html>

     <!-- heading -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <!-- page -->
     <body>
          <!-- connect library jQuery -->
          <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

          <!-- connect library Bootstrap (js file) -->
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>

          <!-- connect library Bootstrap (css file) -->
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

          <!-- HTML Elements -->
          <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>
Example we look, we test
Notes
If you use styles Bootstrap 3 and connect the library Bootstrap 4 then not everything will work correctly (For example: navbar didn't work well ).
 
← Previous topic
What the Bootstrap?
 
Next topic →
Containers in the Bootstrap ("container-fluid" and "container")
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
What the Bootstrap?
Bootstrap where to download and how to connect?
Containers in the Bootstrap ("container-fluid" and "container")
Bootstrap Version 4.0
Bootstrap 4 difference from Bootstrap 3
Elements
"Navbar" in the Bootstrap 4.0 - this is the main horizontal menu for the site (navigation headers)
Styles
class="form-inline" items on a single line | Bootstrap 4.0
class="navbar-expand-lg" disappears if the area size is smaller lg | Bootstrap 4.0
class="mr-auto" move to the right edge , class="ml-auto" move to the left edge | Bootstrap 4.0
Vertical indentation, horizontal indentation | Bootstrap 4.0
to study
WEB Sites to explore Bootstrap 4.0
Bootstrap items for the version 3 and 4
Create a grid "col-md-number" in the Bootstrap 3 and Bootstrap 4
WWW sites for learning Bootstrap
Sites to explore Bootstrap

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