1. Exploring Bootstrap Components
Chapter3
Exploring Bootstrap Components

2. Page Components
Page Headers

5. Panels

6. Panels come with various color options

7. Media Object

10. Thumbnails

12. Thumbnails caption

14. List Group

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

16. various colors to each list item

17. การใส่ 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>

18. Navigation Components

19. Tab Navs

20. Pills navs

21. vertical stack pills

22. Navbar

26. Resize browser

27. Drop-down menus

29. Breadcrumb

30. Label

31. label variants

32. Buttons

33. color options and various sizes

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

35. Glyphicons
ค้นหารูปแบบที่

36. Wells: rounded cornered box

37. 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

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

39. Fun with Forms

42. 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=" Field" class="col-xs-2"> </label> <input type=" " class="form-control" id=" Field"

43. ➥placeholder="Your " /> </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>

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

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

48. Helper Classes in Forms

49. three validation states for input elements:

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