Boostrap Tutorial

libin19890520 發(fā)布于2019-08-30 12:56 / 1393人閱讀

摘要：

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

single line of code
marked words

    quote content
    quoted from who


    list title
    list description

    multiple code here.

key board

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 ---------- Responsive image & rounded rectangle image & completely round border image. You can use one of them or all of them.

Responsive video still to be work with. ####Nav bar ---------- 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 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.

...... Then your navbar must add some specific class names.

...... 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.

A simple well

An alert

×Alert something

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.

Push means move it to the left, pull the opposite. ####Modal ---------- A single pop window. You need a button or some click able elements to control the entrance of you modal. Then you need a modal content, you can use data-dismiss to create a exit button for your modal.