bootstrap.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <section id="bootstrap">
  2. <h2 class="page-header">Bootstrap 3 Examples</h2>
  3. <div class="row">
  4. <div class="col-md-3 col-sm-4">
  5. <p>
  6. <a class="btn btn-danger" href="#">
  7. <i class="fa fa-trash-o fa-lg"></i> Delete</a>
  8. <a class="btn btn-default btn-sm" href="#">
  9. <i class="fa fa-cog"></i> Settings</a>
  10. </p>
  11. <p>
  12. <a class="btn btn-lg btn-success" href="#">
  13. <i class="fa fa-code-fork fa-2x pull-left"></i> {{ site.forkawesome.name }}<br>Version {{ site.forkawesome.version }}</a>
  14. </p>
  15. <div class="margin-bottom">
  16. <div class="btn-group">
  17. <a class="btn btn-default" href="#">
  18. <i class="fa fa-align-left" title="Align Left"></i>
  19. </a>
  20. <a class="btn btn-default" href="#">
  21. <i class="fa fa-align-center" title="Align Center"></i>
  22. </a>
  23. <a class="btn btn-default" href="#">
  24. <i class="fa fa-align-right" title="Align Right"></i>
  25. </a>
  26. <a class="btn btn-default" href="#">
  27. <i class="fa fa-align-justify" title="Align Justify"></i>
  28. </a>
  29. </div>
  30. </div>
  31. <div class="margin-bottom">
  32. <div class="input-group margin-bottom-sm">
  33. <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  34. <input class="form-control" type="text" placeholder="Email address">
  35. </div>
  36. <div class="input-group">
  37. <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  38. <input class="form-control" type="password" placeholder="Password">
  39. </div>
  40. </div>
  41. <div class="margin-bottom">
  42. <div class="btn-group open">
  43. <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  44. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  45. <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  46. </a>
  47. <ul class="dropdown-menu">
  48. <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
  49. <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
  50. <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
  51. <li class="divider"></li>
  52. <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
  53. </ul>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="col-md-9 col-sm-8">
  58. <p>
  59. {{ site.forkawesome.name }} works great with the full range of Bootstrap components.
  60. </p>
  61. {% highlight html %}
  62. <a class="btn btn-danger" href="#">
  63. <i class="fa fa-trash-o fa-lg"></i> Delete</a>
  64. <a class="btn btn-default btn-sm" href="#">
  65. <i class="fa fa-cog"></i> Settings</a>
  66. <a class="btn btn-lg btn-success" href="#">
  67. <i class="fa fa-flag fa-2x pull-left"></i> {{ site.forkawesome.name }}<br>Version {{ site.fontawesome.version }}</a>
  68. <div class="btn-group">
  69. <a class="btn btn-default" href="#">
  70. <i class="fa fa-align-left" title="Align Left"></i>
  71. </a>
  72. <a class="btn btn-default" href="#">
  73. <i class="fa fa-align-center" title="Align Center"></i>
  74. </a>
  75. <a class="btn btn-default" href="#">
  76. <i class="fa fa-align-right" title="Align Right"></i>
  77. </a>
  78. <a class="btn btn-default" href="#">
  79. <i class="fa fa-align-justify" title="Align Justify"></i>
  80. </a>
  81. </div>
  82. <div class="input-group margin-bottom-sm">
  83. <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  84. <input class="form-control" type="text" placeholder="Email address">
  85. </div>
  86. <div class="input-group">
  87. <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  88. <input class="form-control" type="password" placeholder="Password">
  89. </div>
  90. <div class="btn-group open">
  91. <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  92. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
  93. <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  94. </a>
  95. <ul class="dropdown-menu">
  96. <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
  97. <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
  98. <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
  99. <li class="divider"></li>
  100. <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
  101. </ul>
  102. </div>
  103. {% endhighlight %}
  104. </div>
  105. </div>
  106. </section>