What is Bootstrap?
Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The Bootstrap framework is built on HTML, CSS and JavaScript(JS) to facilitate the development of responsive, mobile-first sites and apps.
Bootstrap download link:- https://getbootstrap.com/docs/4.2/getting-started/download/
Typography
The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults.
Element/Class Description
- <h1> - <h6> h1 - h6 headings
- <small> Creates a lighter, secondary text in any heading
- .small Indicates smaller text (set to 85% of the size of the parent)
- .lead Makes a text stand out
- <mark> Highlights text
- <del> Indicates deleted text
- <ins> Indicates inserted text
- <u> Indicates underlined text
- <strong> Indicates bold text
- <em> Indicates italic text
- .text-left Indicates left-aligned text
- .text-center Indicates center-aligned text
- .text-right Indicates right-aligned text
- .text-justify Indicates justified text
- .text-nowrap Indicates no wrap text
- .text-lowercase Indicates lower cased text
- .text-uppercase Indicates upper cased text
- .text-capitalize Indicates capitalized text
Bootstrap Grid System
Grid Classes
The Bootstrap grid system has four classes:
- xs (for phones - screens less than 768px wide)
- sm (for tablets - screens equal to or greater than 768px wide)
- md (for small laptops - screens equal to or greater than 992px wide)
- lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Grid Example
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Button Styles
To achieve the button styles, Bootstrap has the following classes:
- .btn
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Button style examples
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Button Sizes
The classes that define the different sizes are:
- btn-lg
- .btn-md
- .btn-sm
- .btn-xs
No comments:
Post a Comment