nav-css.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <li>
  2. <a href="#overview">Overview</a>
  3. <ul class="nav">
  4. <li><a href="#overview-doctype">HTML5 doctype</a></li>
  5. <li><a href="#overview-mobile">Mobile first</a></li>
  6. <li><a href="#overview-type-links">Typography and links</a></li>
  7. <li><a href="#overview-normalize">Normalize.css</a></li>
  8. <li><a href="#overview-container">Containers</a></li>
  9. </ul>
  10. </li>
  11. <li>
  12. <a href="#grid">Grid system</a>
  13. <ul class="nav">
  14. <li><a href="#grid-intro">Introduction</a></li>
  15. <li><a href="#grid-media-queries">Media queries</a></li>
  16. <li><a href="#grid-options">Grid options</a></li>
  17. <li><a href="#grid-example-basic">Ex: Stacked-to-horizontal</a></li>
  18. <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
  19. <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
  20. <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
  21. <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
  22. <li><a href="#grid-offsetting">Offsetting columns</a></li>
  23. <li><a href="#grid-nesting">Nesting columns</a></li>
  24. <li><a href="#grid-column-ordering">Column ordering</a></li>
  25. <li><a href="#grid-less">Less mixins and variables</a></li>
  26. </ul>
  27. </li>
  28. <li>
  29. <a href="#type">Typography</a>
  30. <ul class="nav">
  31. <li><a href="#type-headings">Headings</a></li>
  32. <li><a href="#type-body-copy">Body copy</a></li>
  33. <li><a href="#type-emphasis">Emphasis</a></li>
  34. <li><a href="#type-abbreviations">Abbreviations</a></li>
  35. <li><a href="#type-addresses">Addresses</a></li>
  36. <li><a href="#type-blockquotes">Blockquotes</a></li>
  37. <li><a href="#type-lists">Lists</a></li>
  38. </ul>
  39. </li>
  40. <li>
  41. <a href="#code">Code</a>
  42. <ul class="nav">
  43. <li><a href="#code-inline">Inline code</a></li>
  44. <li><a href="#code-user-input">User input</a></li>
  45. <li><a href="#code-block">Blocks of code</a></li>
  46. </ul>
  47. </li>
  48. <li>
  49. <a href="#tables">Tables</a>
  50. <ul class="nav">
  51. <li><a href="#tables-example">Basic example</a></li>
  52. <li><a href="#tables-striped">Striped rows</a></li>
  53. <li><a href="#tables-bordered">Bordered table</a></li>
  54. <li><a href="#tables-hover-rows">Hover rows</a></li>
  55. <li><a href="#tables-condensed">Condensed table</a></li>
  56. <li><a href="#tables-contextual-classes">Contextual classes</a></li>
  57. <li><a href="#tables-responsive">Responsive tables</a></li>
  58. </ul>
  59. </li>
  60. <li>
  61. <a href="#forms">Forms</a>
  62. <ul class="nav">
  63. <li><a href="#forms-example">Basic example</a></li>
  64. <li><a href="#forms-inline">Inline form</a></li>
  65. <li><a href="#forms-horizontal">Horizontal form</a></li>
  66. <li><a href="#forms-controls">Supported controls</a></li>
  67. <li><a href="#forms-controls-static">Static control</a></li>
  68. <li><a href="#forms-control-focus">Focus state</a></li>
  69. <li><a href="#forms-control-disabled">Disabled state</a></li>
  70. <li><a href="#forms-control-validation">Validation states</a></li>
  71. <li><a href="#forms-control-sizes">Control sizing</a></li>
  72. <li><a href="#forms-help-text">Help text</a></li>
  73. </ul>
  74. </li>
  75. <li>
  76. <a href="#buttons">Buttons</a>
  77. <ul class="nav">
  78. <li><a href="#buttons-options">Options</a></li>
  79. <li><a href="#buttons-sizes">Sizes</a></li>
  80. <li><a href="#buttons-active">Active state</a></li>
  81. <li><a href="#buttons-disabled">Disabled state</a></li>
  82. <li><a href="#buttons-tags">Button tags</a></li>
  83. </ul>
  84. </li>
  85. <li>
  86. <a href="#images">Images</a>
  87. <ul class="nav">
  88. <li><a href="#images-responsive">Responsive images</a></li>
  89. <li><a href="#images-shapes">Image shapes</a></li>
  90. </ul>
  91. </li>
  92. <li>
  93. <a href="#helper-classes">Helper classes</a>
  94. <ul class="nav">
  95. <li><a href="#helper-classes-colors">Contextual colors</a></li>
  96. <li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
  97. <li><a href="#helper-classes-close">Close icon</a></li>
  98. <li><a href="#helper-classes-carets">Carets</a></li>
  99. <li><a href="#helper-classes-floats">Quick floats</a></li>
  100. <li><a href="#helper-classes-center">Center content blocks</a></li>
  101. <li><a href="#helper-classes-clearfix">Clearfix</a></li>
  102. <li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
  103. <li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
  104. <li><a href="#helper-classes-image-replacement">Image replacement</a></li>
  105. </ul>
  106. </li>
  107. <li>
  108. <a href="#responsive-utilities">Responsive utilities</a>
  109. <ul class="nav">
  110. <li><a href="#responsive-utilities-classes">Available classes</a></li>
  111. <li><a href="#responsive-utilities-print">Print classes</a></li>
  112. <li><a href="#responsive-utilities-tests">Test cases</a></li>
  113. </ul>
  114. </li>
  115. <li>
  116. <a href="#less">Using Less</a>
  117. <ul class="nav">
  118. <li><a href="#less-bootstrap">Compiling Bootstrap</a></li>
  119. <li><a href="#less-variables">Variables</a></li>
  120. <li><a href="#less-mixins-vendor">Vendor mixins</a></li>
  121. <li><a href="#less-mixins-utility">Utility mixins</a></li>
  122. </ul>
  123. </li>
  124. <li>
  125. <a href="#sass">Using Sass</a>
  126. <ul class="nav">
  127. <li><a href="#sass-contents">What's included</a></li>
  128. <li><a href="#sass-installation">Rails install</a></li>
  129. </ul>
  130. </li>