Lecture5 Bootstrap

7/26/2019 Lecture5 Bootstrap

1/32

*Bootstrap


2/32

*What is Bootstrap?

*Web front-end framework

*Solves cross browser compat via a reset css

*Is comprised of:

*CSS

*Javascript

*Fonts

*Open-source on Github*Created b two !us who work at "witter


3/32

*Bootstrap GridSystem

*#uick and eas wa to create responsive website laouts

*predefined !rid classes for different tpes of devices likecell phones$ tablets$ laptops and desktops

*%& column responsive !rid sstem

*'col-(s-) class to create !rid columns for e(tra small

devices like cell phones

*'col-sm-) class for small screen devices like tablets

*'col-md-) class for medium si+e devices like desktops

*'col-l!-) for lar!e desktop screens


4/32


5/32


6/32

*Typography

*Working with Headings

*,ou can define all "./ headin!s

$ 0h%1 throu!h 0h21 3 In the same wa oudefine in simple "./ document'

*can use the 0small1ta! or 0span1ta!

with 'small class to displa the secondar te(t of

an headin! in a smaller and li!hter variation'
http://www.tutorialrepublic.com/html-tutorial/html-headings.phphttp://www.tutorialrepublic.com/html-reference/html-small-tag.phphttp://www.tutorialrepublic.com/html-reference/html-span-tag.phphttp://www.tutorialrepublic.com/html-reference/html-span-tag.phphttp://www.tutorialrepublic.com/html-reference/html-small-tag.phphttp://www.tutorialrepublic.com/html-tutorial/html-headings.php


7/32


8/32

*Creating Page Headers

*make our 0h%1 headin! appear differentl than

rest of the headin!s on a pa!e


9/32

*Bootstrap Text Formatting


10/32

*Text Emphasis Classes


11/32

*Table

*Creating a Simple Table with Bootstrap

*addin! the 4ootstrap5s class 'table to the 0table1

element
http://www.tutorialrepublic.com/html-reference/html-table-tag.phphttp://www.tutorialrepublic.com/html-reference/html-table-tag.php


12/32


13/32

*Tables with Striped ows

*addin! the 4ootstrap5s class 'table-striped to

the 'table base class'


14/32

*Table with Borders on !ll Sides

*addin! an e(tra 4ootstrap5s class 'table-

bordered to the 'table base class'

*Enable Ho"er State on Table ows

*addin! the 4ootstrap5s class 'table-hover to

the 'table base class'


15/32

*#ptional Emphasis Classes $or Table ows

*emphasi+e the row or individual cells data like

success$ warnin!$ dan!er$ etc' throu!h colorin!its back!round'


16/32


17/32

*Forms

*Creating %erti&al Form 'ayo(t


18/32

*Creating Hori)ontal Form 'ayo(t

* labels are ri!ht ali!ned and floated to left to make

them appear on the same line as form controls'*Steps to achieve this laout are listed below:

* 6dd the class 'form-hori+ontal to the 0form1element'

*Wrap labels and form controls in a 0div1element and

appl the class 'form-!roup'

*7se 4ootstrap5s predefined !rid classesto ali!n labels

and form controls'

* 6dd the class 'control-label to the 0label1element'
http://www.tutorialrepublic.com/html-tutorial/html-forms.phphttp://www.tutorialrepublic.com/html-reference/html-div-tag.phphttp://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.phphttp://www.tutorialrepublic.com/html-reference/html-label-tag.phphttp://www.tutorialrepublic.com/html-reference/html-label-tag.phphttp://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.phphttp://www.tutorialrepublic.com/html-reference/html-div-tag.phphttp://www.tutorialrepublic.com/html-tutorial/html-forms.php


19/32


20/32

*Pla&ing Help Text aro(nd Form Controls

*!uide users to enter the correct data in a form'

*place block level help te(t for the form controlsusin! the class 'help-block'


21/32

*Bootstrap Form %alidation States

*stlin! input controls to present different

validation states'* includes validation stles for error$ warnin!$ and

success messa!es'


22/32


23/32

*B(ttons


24/32


25/32

*Changing the Si)es o$ B(ttons

*make buttons lar!er or smaller throu!h addin! an

e(tra class 'btn-l!$ 'btn-sm$ or 'btn-(s'*Bootstrap *isabled B(ttons

*addin! the class 'disabled


26/32

*+a" Components

*Creating Basi& Tabs with Bootstrap


27/32

*!dding ,&ons to Tabs


28/32

*Creating Basi& Pills +a" with Bootstrap

*usin! the base class 'nav-pills instead of 'nav-

tabs$ without an further chan!e in markup'


29/32

*Creatin! "abs with 8ropdowns

*"he four CSS classes 'dropdown$ 'dropdown-

to!!le$ 'dropdown-menu and 'caret are re#uiredin addition to the 'nav$ 'nav-tabs$ 'nav-pills to

create a simple dropdown menu'


30/32

*+a"bar

*create responsive navi!ation header for our

website or application'

*"hese responsive navbar initiall collapsed ondevices havin! small viewports like cell-phones

but e(pand when user click the to!!le button'

*it will be hori+ontal as normal on the medium

and lar!e devices like laptop or desktop'


31/32


32/32

Lecture5 Bootstrap

Documents