bootstrap day2
TRANSCRIPT
![Page 1: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/1.jpg)
Day Two
Mohammad Rafi Haidari
![Page 2: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/2.jpg)
Bootstrap Button Groups
Bootstrap allows you to group a series of buttons together (on a single line) in a button group:
Use a <div> element with class .btn-group to create a button group:
<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>
![Page 3: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/3.jpg)
Bootstrap Button Groups
Vertical Button GroupsBootstrap also supports vertical button groups:
Use the class .btn-group-vertical to create a vertical button group:
<div class="btn-group-vertical"><button type="button" class="btn btn-primary">Apple</button><button type="button" class="btn btn-primary">Samsung</button><button type="button" class="btn btn-primary">Sony</button>
</div>
![Page 4: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/4.jpg)
Bootstrap Button Groups
Justified Button GroupsTo span the entire width of the screen, use the .btn-group-justified class:
<div class="btn-group btn-group-justified"><a href="#" class="btn btn-primary">Apple</a><a href="#" class="btn btn-primary">Samsung</a><a href="#" class="btn btn-primary">Sony</a>
</div>
![Page 5: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/5.jpg)
Bootstrap Button Groups
Split Button Dropdowns
<div class="btn-group"><button type="button" class="btn btn-primary">Sony</button><button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
</button><ul class="dropdown-menu" role="menu"><li><a href="#">Tablet</a></li><li><a href="#">Smartphone</a></li>
</ul></div>
![Page 6: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/6.jpg)
Bootstrap Glyphicons
Bootstrap provides 260 glyphicons from the Glyphicons Halflings set.
Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
Here are some examples of glyphicons:
• Envelope glyphicon:
• Print glyphicon:
• Search glyphicon:
• Download glyphicon:
A glyphicon is inserted with the following syntax:
<span class="glyphicon glyphicon-name"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-info"><span class="glyphicon glyphicon-search"></span> Search
</button>
Search icon on a styled button:
http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
![Page 7: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/7.jpg)
Bootstrap Badges and Labels
Badges are numerical indicators of how many items are associated with a link:
<a href="#">News <span class="badge">5</span></a><br>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Badges can also be used inside other elements, such as buttons:
![Page 8: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/8.jpg)
Bootstrap Badges and Labels
Labels are used to provide additional information about something:
Use the .label class, followed by one of the six contextual classes .label-default,.label-primary,.label-success, .label-info, .label-warning or .label-danger, within a <span> element to create a label:
<span class="label label-default">Default Label</span><span class="label label-primary">Primary Label</span><span class="label label-success">Success Label</span><span class="label label-info">Info Label</span><span class="label label-warning">Warning Label</span><span class="label label-danger">Danger Label</span>
![Page 9: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/9.jpg)
Bootstrap Progress Bars
A progress bar can be used to show a user how far along he/she is in a
process.
Bootstrap provides several types of progress bars.
A default progress bar in Bootstrap looks like this:
<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="70"aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span></div>
</div>
![Page 10: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/10.jpg)
Bootstrap Progress Bars
Colored Progress BarsContextual classes are used to provide "meaning through colors".The contextual classes that can be used with progress bars are:
•progress-bar-success
•progress-bar-info
•progress-bar-warning
•progress-bar-danger
<div class="progress"><div class="progress-bar progress-bar-
success" role="progressbar" aria-valuenow="40"aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)</div>
</div>
![Page 11: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/11.jpg)
Bootstrap Progress Bars
Striped Progress BarsProgress bars can also be striped:
<div class="progress"><div class="progress-bar progress-bar-success progress-
bar-striped" role="progressbar"aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%">40% Complete (success)
</div></div>
![Page 12: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/12.jpg)
Bootstrap Progress Bars
Animated Progress BarHere is an "animated" progress bar:
<div class="progress"><div class="progress-bar progress-bar-striped
active" role="progressbar"aria-valuenow="40" aria-valuemin="0" aria-
valuemax="100" style="width:40%">40%
</div></div>
![Page 13: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/13.jpg)
Any Question?
![Page 14: Bootstrap day2](https://reader030.vdocuments.us/reader030/viewer/2022021422/589ce5fa1a28abf86d8b62a1/html5/thumbnails/14.jpg)
Thank You.