7/26/2019 Lecture5 Bootstrap
1/32
*Bootstrap
7/26/2019 Lecture5 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
7/26/2019 Lecture5 Bootstrap
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
7/26/2019 Lecture5 Bootstrap
4/32
7/26/2019 Lecture5 Bootstrap
5/32
7/26/2019 Lecture5 Bootstrap
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.php7/26/2019 Lecture5 Bootstrap
7/32
7/26/2019 Lecture5 Bootstrap
8/32
*Creating Page Headers
*make our 0h%1 headin! appear differentl than
rest of the headin!s on a pa!e
7/26/2019 Lecture5 Bootstrap
9/32
*Bootstrap Text Formatting
7/26/2019 Lecture5 Bootstrap
10/32
*Text Emphasis Classes
7/26/2019 Lecture5 Bootstrap
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.php7/26/2019 Lecture5 Bootstrap
12/32
7/26/2019 Lecture5 Bootstrap
13/32
*Tables with Striped ows
*addin! the 4ootstrap5s class 'table-striped to
the 'table base class'
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
16/32
7/26/2019 Lecture5 Bootstrap
17/32
*Forms
*Creating %erti&al Form 'ayo(t
7/26/2019 Lecture5 Bootstrap
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.php7/26/2019 Lecture5 Bootstrap
19/32
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
21/32
*Bootstrap Form %alidation States
*stlin! input controls to present different
validation states'* includes validation stles for error$ warnin!$ and
success messa!es'
7/26/2019 Lecture5 Bootstrap
22/32
7/26/2019 Lecture5 Bootstrap
23/32
*B(ttons
7/26/2019 Lecture5 Bootstrap
24/32
7/26/2019 Lecture5 Bootstrap
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
7/26/2019 Lecture5 Bootstrap
26/32
*+a" Components
*Creating Basi& Tabs with Bootstrap
7/26/2019 Lecture5 Bootstrap
27/32
*!dding ,&ons to Tabs
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
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'
7/26/2019 Lecture5 Bootstrap
31/32
7/26/2019 Lecture5 Bootstrap
32/32
Top Related