Adsense
Popular Posts
- Code update from PHP 7.4 to PHP 8.1 - PhpSpreadsheet
- MySQL workbench -"Could not decrypt password cache"
- Code update from PHP 7.4 to PHP 8.1 - Worksheet/Iterator.php
- Rendering HTML tags inside textarea
- axios handle blob type data
- Unix Utils and wget in Windows
- increase mysql query speed
- Setup vi syntax for PHP
- EXCEL return to the next line in the same cell
- Get WAMP running on EC2
Monday, February 12, 2018
Bootstrap basic tutorial
Bootstrap (can be downloaded from https://getbootstrap.com/)
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
A) Container
<div class="container"></div>
or
<div class="container-fluid"></div>
The .container class: responsive fixed width container
The .container-fluid class: full width container over entire width of the viewport. This should be used for the application mainly for desktop.
B) Bootstrap Grid System
The # sign below is the place-holder for the number of columns.
Bootstrap's grid system allows up to 12 columns across the page.
.col-sm-12 for full screen width while .col-sm-6 for half screen width
column class: .col-xs-# (Extra small, for phone screen less than 768px)
column class: .col-sm-# (small, for tablets screen >= 768 px)
column class: .col-md-# (Medium, for small laptops screen >= 991 px)
column class: .col-lg-# (Large, for laptop screen >=1200 px)
Example
<div class="row">
<div class="col-sm-4">4 column width for not small device</div>
<div class="col-sm-8">8 column width for not small device</div>
</div>
For small device such as phone and tablet for above example, the columns will automatically stack.
C) Table
1) .table-striped adds zebra-stripes to each row in a table, Example of table in Bootstrap
<div class="container-fluid">
<h2>Striped Rows</h2>
<table class="table table-striped">
<thead>
<tr>
<th>header column</th>
</tr>
</thead>
<tbody>
<tr>
<td>body column</td>
</tr>
</tbody>
</table>
</div>
2) .table-bordered: adds borders on all sides of the table and cells:
3) .table-hover class adds a grey background hover effect
4) .table-condensed makes a table more compact
5) .table-responsive creates a responsive table.
6) contextual classes:
.active .success .info .warning .danger
D) Alert
Example
<div class="alert alert-success"> </div>
<div class="alert alert-info"></div>
<div class="alert alert-warning"></div>
<div class="alert alert-danger"></div>
More about Bootstrap tutorial
https://www.w3schools.com/bootstrap/
Labels:
Bootstrap
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment