Frameworks: Bootstrap

Bootstrap adalah CSS dan JavaScript frameworks. Bootstrap mempunyai template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lain-lain bagi membina responsive website. Bootstrap boleh diperolehi di getbootstrap.com.

Bootstrap CDN (Content Delivery Network) daripada MaxCDN dan juga memerlukan jQuery.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap class to wrap site content.

  1. container = fixed width container
  2. container-fluid = full width container, spanning the entire width of the viewport
<div class="container">
</div>

Bootstrap Jumbotron, is displayed as a grey box with rounded corners.

<div class="jumbotron">
</div>

Bootstrap table, table-striped, table-bordered, table-hover, table-condensed

<table class="table table-bordered">
</table> 

Bootstrap alert, alert-success, alert-info, alert-warning, alert-danger

<div class="alert alert-danger">
</div>

Bootstrap button, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link, btn-lg, btn-md, btn-sm, btn-xs, btn-block, btn-group, btn-group-vertical, btn-group-justified

<button type="button" class="btn btn-link btn-lg">Link</button>

Bootstrap progress bar, progress-bar, progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger, progress-bar-striped

<div class="progress">
</div>

Bootstrap dropdown/dropup, divider, dropdown-header, disabled, dropdown-menu, dropup

<div class="dropdown">
</div>

Contoh: http://shahrulnizam.com/web/bootstrap.php

Penerangan lanjut di

  1. http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
  2. http://www.w3schools.com/bootstrap/bootstrap_tables.asp
  3. http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
  4. http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
  5. http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.