Introduction to Bootstrap ~ IT BLOG

1. What is bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

2. Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Grid Classes

The Bootstrap grid system has four classes:

    xs (for phones - screens less than 768px wide. Tương ứng sẽ là col-xs-xx, trong đó xx trong khoảng từ 1-12)
    sm (for tablets - screens equal to or greater than 768px wide. Tương ứng sẽ là col-sm-xx)
    md (for small laptops - screens equal to or greater than 992px wide. Tương ứng sẽ là col-md-xx)
    lg (for laptops and desktops - screens equal to or greater than 1200px wide. Tương ứng sẽ là col-lg-xx)

The classes above can be combined to create more dynamic and flexible layouts.
Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

First; create a row (

<div 
class="row">

). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns

.col-sm-4

The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones or screens that are less than 768px wide, the columns will automatically stack:

Example

Two Unequal Columns

.col-sm-4

.col-sm-8

The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:

Example

Tip: You will learn more about Bootstrap grids later in this tutorial.

3. Grid System Rules

Some Bootstrap grid system rules:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Column widths are in percentage, so they are always fluid and sized relative to their parent element

4. Bootstrap CSS Forms Reference

Individual form controls automatically receive some global styling with Bootstrap.
All textual <input>, <textarea>, and <select> elements with class="form-control" are set to width: 100%; by default.
Standard rules for all three form layouts:

Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
Add class .form-control to all textual <input>, <textarea>, and <select> elements

The following example creates a simple Bootstrap form with two input fields, one checkbox, and a submit button:

Bootstrap Form Example

<form>
<div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
</div>
<div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" 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>

Form Classes
Class     Description     Example
.form-inline     Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide)
.form-horizontal     Aligns labels and groups of form controls in a horizontal layout
.form-control     Used on input, textarea, and select elements to span the entire width of the page and make them responsive
.form-control-feedback     Form validation class
.form-control-static     Adds plain text next to a form label within a horizontal form
.form-group     Container for form input and label

Input Classes
Class     Description     Example
.input-group     Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text"
.input-group-lg     Large input group
.input-group-sm     Small input group
.input-group-addon     Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field
.input-group-btn     Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar
.input-lg     Large input field
.input-sm     Small input field

5. Quick start

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

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

integrity="xx crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

integrity="xx" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"

integrity="xx" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

integrity="xx" crossorigin="anonymous"></script>

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

integrity="xx" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

integrity="xx" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"

integrity="xx" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

integrity="xx" crossorigin="anonymous"></script>
  </body>
</html>

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  box-sizing: content-box;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.
Learn more about box model and sizing at CSS Tricks.

6. Bootstrap JS Modal

JS Modal (modal.js)
The Modal plugin is a dialog box/popup window that is displayed on top of the current page.
For a tutorial about Modals, read our Bootstrap Modal Tutorial.

Class	Description
.modal	Creates a modal
.modal-content	Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer.
.modal-header	Defines the style for the header of the modal
.modal-body	Defines the style for the body of the modal
.modal-footer	Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, overwrite CSS with text-align:left\|center
.modal-sm	Specifies a small modal
.modal-lg	Specifies a large modal
.fade	Adds an animation/transition effect which fades the modal in and out

Trigger the Modal Via data-* Attributes

Add data-toggle="modal" and data-target="#modalID" to any element.
Note: For <a> elements, omit data-target, and use href="#modalID" instead:

Example

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>


<a data-toggle="modal" href="#myModal">Open Modal</a>


<p data-toggle="modal" data-target="#myModal">Open Modal</p>

Try it Yourself »

Reference documents:

https://www.w3schools.com/css/css_rwd_intro.asp
https://www.w3schools.com/css/css_rwd_intro.asp
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_css_forms.asp
https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://getbootstrap.com/docs/4.0/layout/grid/
https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
http://www.littlebigextra.com/add-bootstrap-css-jquery-to-springboot-mvc

1 comment:

erectile dysfunction pillsThursday, November 26, 2020 at 12:29:00 AM GMT+7
This design is steller! You most certainly know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Great job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

IT BLOG

Shared info of IoT & Cloud, Banking, Angular Wicket, Spring Microservices, BigData, flutter, E-comm, Java Telecomm and More

Sunday, March 18, 2018