Boostrap Tutorial

Bootstrap tutorial

Download bootstrap

---

To get bootstrap
Use CDN which stands for const file delivery network instead of download a zip.

Container

---

Container is fixed length, using container-fluid to get 100% width.

Some marks

---

<code>single line of code</code>
<mark>marked words</mark>
<blockquote>
    <p>quote content</p>
    <footer>quoted from who</footer>
</blockquote>
<dl>
    <dt>list title</dt>
    <dd>list description</dd>
</dl>
<pre>
    multiple code here.
</pre>
<kbd>key board</kbd>

Use the correct marks to prettify your page.

Responsive table

---

Normal table & condensed table(smaller padding) & striped table(change color each rows). Always use thead & tbody to organize your table. Advanced classes refer to bootstrap table ####Responsive img&video ---------- <img src="" class="img-responsive"/> <img src="" class="img-rounded"/> <img src="" class="img-circle"/> Responsive image & rounded rectangle image & completely round border image. You can use one of them or all of them. <div class="embed"> <iframe class="embed-item" src=""></iframe> </div> Responsive video still to be work with. ####Nav bar ---------- <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header">LOGO</div> <ul class="nav navbar-nav"> <li class="active">Home</li> <li>About</li> </ul> </div> </nav> Always use nav mark, a nav mark contains navbar-header & navbar-nav. Use navbar-brand to place you logo or brand. #####Drop down menu on navbar <li class="dropdown"> My Profile <ul class="dropdown-menu"> <li>some profile</li> </ul> </li> Data-toggle attribute is essential. More components and advanced attributes refer to Bootstrap components/dropdowns #####Navbar toggle First in the navbar header, a button must be included. <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" target="#your-navbar-id"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> ...... Then your navbar must add some specific class names. <div class="collapse navbar-collapse" id="your-navbar-id"> ...... So when your screen is extra small, the navbar would not shrink but change into a button which is something like a drop down menu. This button would not be seen while you are browsing through something other than cellphone. See more at Bootstrap navbars. ####Wells & Alert Boxes ---------- A well is a single island section that has slightly border and background. Alert is pretty much the same thing, just contains more UI elements. <div class="well">A simple well</div> An alert <div class="alert alert-success fade in"> &timesAlert something </div> The a mark stands for a close button for users to close this alert box. It requires 4 attributes, what these means still not known. Fade in stands for a animation for this danger box. ####Push&Pull ---------- If you want change the order bootstrap rows , use the following code. <div class="col-md-4 col-md-push-2"></div> Push means move it to the left, pull the opposite. ####Modal ---------- A single pop window. <button class="btn btn-primary" data-toggle="modal" data-target="#your-modal-id"></button> You need a button or some click able elements to control the entrance of you modal. <div class="modal" id="your-modal-id"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> Then you need a modal content, you can use data-dismiss to create a exit button for your modal.