Bootstrap Components Quick Overview
Download as PPT, PDF0 likes805 views
The document discusses Bootstrap's grid system and components. The grid system defines column classes for extra small, small, medium, and large devices. It includes examples of basic grid structure using rows and columns. The document also lists and provides examples of various Bootstrap components including glyphs, dropdowns, buttons, inputs, navigation, breadcrumbs, labels, badges, alerts, progress bars, panels and more.
Bootstrap Components Quick Overview
- 1. Grid System Available Class Col-xs : For Extra small Devices Col-sm : For Tablets Col-md : For Medium Devices Col-lg : For Large Devices BOOTSTRAP
- 2. <div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> </div> -Offset- <div class="row"> <div class="col-sm-offset-2 col-sm-10"> </div> </div> BASIC GRID STRUCTURE
- 3. Glyphicons Dropdowns Button Groups Input Groups Navs Nav Bar Breadcrumbs Panels Responsive embed Wells Pagination Labels Badges Jumbotron Page Header Thumbnails Alerts Progress Bars Media Object List Group COMPONENTS
- 4. GLYPHICON
- 5. <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> Preview DROPDOWNS
- 6. Preview BUTTON DROPDOWNS <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
- 7. INPUT GROUPS Preview <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div>
- 8. NAVS <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> Tabs Pills Preview Preview
- 10. v BREADCRUMBS Preview <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
- 11. PAGINATION Preview <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
- 12. LABELS Preview <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
- 13. BADGES <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button> Preview
- 14. JUMBOTRON <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> Preview
- 15. THUMBNAILS <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> ... </div>Preview
- 16. ALERTS Preview <div class="alert alert-success" role="alert">...</div> <div class="alert alert-info" role="alert">...</div> <div class="alert alert-warning" role="alert">...</div> <div class="alert alert-danger" role="alert">...</div>
- 17. PROGRESS BARS Preview <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>
- 18. PANELS <div class="panel panel-primary">...</div> <div class="panel panel-success">...</div> <div class="panel panel-info">...</div> <div class="panel panel-warning">...</div> <div class="panel panel-danger">...</div> Preview