Bootstrap 4.0

======Bootstrap 4.0========
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

======================================================================================================
*. jumbotron jumbotron-fluid : usecase: hero background
:::::jumbotron
:::::jumbotron-fluid 


*. display extra large text
::::: display-1,2,3,4


*. background color
::::: bg-primary -> blue
::::: bg-success ->green
::::: bg-info ->light blue
::::: bg-warning -> yellow
::::: bg-danger -> orange
::::: bg-inverse -> black
::::: bg-faded -> ash 


*. text color
::::: text-* , muted: light gray


*. text align (put into the container to make all the text center)
::::: text-center,left,right 


*. padding,margin
::::: p-padding,m-margin
	-> y: up and down
	-> x: left and right
	-> py-5 : up-down 5 padding
	-> my-5 : up-down 5 margin

* image 
::::: img-fluid

*content align using flex
::::: justify-content-center (put in into container)



**. Card
::::: ->div.card: create a box with border
		->img.card-img-top,img-fluid: image without padding, make image no strech(img-fluid)
		->div.card-block : usually contain text
			->h2.card-title : header text
			
			
			
**. Nav (create tab with nav+tab)
::::: ->nav.nav.nav-pills,
		-> a.nav-link.active -> data-toggle: tab ->href="#tab1"
		-> a.nav-link -> data-toggle: tab ->href="#tab2"
		-> a.nav-link -> data-toggle: tab ->href="#tab3"
:::::
	-div.tab-content.py-5
		->tab-pane.active(tab-item) ->ID=tab1
		->tab-pane(tab-item) ->ID=tab2
		->tab-pane(tab-item) ->ID=tab3



** Navbars
:::: -> nav.navbar.navbar-toggleable-sm.bg-info.nav-inverse
		-> div.container(to make all nav link centered)
			->button.navbar-toggler ->data-toggle="collapse"  ->data-target="#mainNavID" (this button will control the collapse)
				->span.navbar-toggler-icon
			->div.collapse.navbar-collapse#mainNavID (this will contain collapsing content)
				->ul.navbar-nav
					->li.nav-item.active
						->a.nav-link
					->li.nav-item
						->a.nav-link<


 ** tooltips
Top
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });

Leave a Comment

Your email address will not be published. Required fields are marked *

top