Exploring Bootstrap Components Chapter3 Exploring Bootstrap Components

Page Components Page Headers

Panels

Panels come with various color options

Media Object

Thumbnails

Thumbnails caption

List Group

Lists of Links ถ้าเราต้องการสร้าง list ที่เป็น links เราจะใช้ <a href=“”>…</a> แทน <li> และใช้ <div> แทน <ul>

various colors to each list item

การใส่ heading ในรายการ list <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">Itemheading</h4> <p class="list-group-item-text">Lorem ipsum dolor sit ...</p> </a>

Navigation Components

Tab Navs

Pills navs

vertical stack pills

Navbar

Resize browser

Drop-down menus

Breadcrumb

Label

label variants

Buttons

color options and various sizes

helper classes for buttons ■ btn-block ■ active ■ disabled

Glyphicons ค้นหารูปแบบที่ http://getbootstrap.com/components/#glyphicons

Wells: rounded cornered box

three variants Wells 1. Default: use only the well class. 2. Large spacing: use the well and well-lg classes together. 3. Small spacing: use the well and well-sm classes together

Badges <span class="badge">23</span> <a href="#" class="btn btn-primary btn-lg">Inbox ➥<span class="badge">23</span></a>

Fun with Forms

Horizontal Forms <form class="form-horizontal"> <div class="form-group"> <label for="nameField" class="col-xs-2">Name</label> <div class="col-xs-10"> <input type="text" class="form-control" id="nameField" ➥placeholder="Your Name" /> </div> <label for="emailField" class="col-xs-2">Email</label> <input type="email" class="form-control" id="emailField"

➥placeholder="Your Email" /> </div> <div class="form-group"> <label for="phoneField" class="col-xs-2">Phone</label> <div class="col-xs-10"> <input type="text" class="form-control" id="phoneField" ➥placeholder="Your Phone Number" /> <label for="descField" class="col-xs-2">Description</label> <textarea class="form-control" id="descField" ➥placeholder="Your Comments"></textarea> <div class="col-xs-10 col-xs-offset-2"> <button type="submit" class="btn btn-primary">Submit ➥</button> <button type="reset" class="btn btn-default">Reset ➥</button> </form>

Inline Form <div class="well well-sm"> <form class="form-inline"> <div class="form-group"> <input type="email" class="form-control" id="emailField" ➥placeholder="Enter email"> </div> <input type="password" class="form-control" ➥id="passwordField" placeholder="Password">

<div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign in ➥</button> </form>

Helper Classes in Forms

three validation states for input elements:

Control Sizing ■ input-lg for bigger input elements than the default size. ■ input-sm for smaller input elements