Bootstrap

From HaFrWiki
Revision as of 17:21, 19 August 2020 by Hjmf (talk | contribs) (Grid Options)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Bootstrap is a collection/framework of different tools having the properties/attributes:

  • A free collection of tools for creating websites and web applications
  • Contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components
  • Contains optional JavaScript extensions
  • Is open source
  • Available on GitHub

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Benefits of the usage of Bootstrap?

  • Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
  • Browser support: Bootstrap is supported by all popular browsers
  • Responsive web design: Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phones
  • Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap

Bootstrap include:

  • Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
  • Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
  • Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
  • JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one
  • Customizable Components: Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version

Base assumptions

Keep in mind that Bootstrap 3 is mobile-first!
The code for Bootstrap starts by targeting smaller screens like mobile devices and tablets, and then "expands" components and grids for larger screens.

Grid Options

The following table summarizes how the Bootstrap grid system works across multiple devices:

  Extra small devices
Phones (<576px)
Small devices
Tablets (>=576px)
Medium devices
Desktops (>=768px)
Large devices
Desktops (>=1200px)
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

For Bootstrap 4.0 please refer to https://getbootstrap.com/docs/4.0/layout/grid

Usage

Two methods for the usage of Bootstrap:

  1. Download Bootstrap from the Bootstrap Website http://getbootstrap.com.
  2. Include Bootstrap from a Content Delivery Network (CDN), like MaxCDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional: Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Optional: Incorporate the Bootstrap JavaScript plugins -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Bootstrap Laravel

Assuming:

  • Terminal has been opened
  • Located in the root of the Laravel application.
  • npm [1] has been installed.

The good location contains the file 'composer.son'.

To add Bootstrap to Laravel add line 7 to composer.json file located in the root of the Laravel application:

 1. {
 2.  "name": "laravel/laravel",
 3.  "description": "The Laravel Framework.",
 4.   "keywords": ["framework", "laravel"],
 5.   "require": {
 6.	"laravel/framework": "4.0.*",
 7.	"twitter/bootstrap": "*"
 8.   },

and run:

$ composer update

The result will be that there is a directory twitter located under the vendor directory.

$ cd vendor/twitter/bootstrap/
$ npm install
...

You now have the required bootstrap located in: vendor/twitter/bootstrap/dist/css. Just copy them to 'public /packages' or run the artisan command (from the root dire of the Laravel installation):

$ php artisan asset:publish --path="vendor/twitter/bootstrap/dist/css" bootstrap/css

See also

top

Reference

top

  1. Nodejs, npm (https://npmjs.org) installation.