API tools faq
paste
Crenox

Bootstrap Tutorial, Web Development LearnCode.academy #4

Crenox
Jun 24th, 2015
278
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Bootstrap Layouts</title>
  6. <link href="styles/main.css" rel="stylesheet" type="text/css" />
  7. <!-- Latest compiled and minified CSS -->
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. <!-- Optional theme -->
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  11. </head>
  12.  
  13. <body>
  14. <header class="navbar-inverse" role="banner">
  15. <div class="container">
  16. <nav role="navigation">
  17.  
  18. <!-- Brand and toggle get grouped for better mobile display -->
  19. <div class="navbar-header">
  20. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  21. <span class="sr-only">Toggle navigation</span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. </button>
  26.  
  27. <a class="navbar-brand" href="#">Brand</a>
  28. </div>
  29.  
  30. <!-- Collect the nav links, forms, and other content for toggling -->
  31. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  32. <ul class="nav navbar-nav">
  33. <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  34. <li><a href="#">Link</a></li>
  35.  
  36. <li class="dropdown">
  37. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  38. <ul class="dropdown-menu">
  39. <li><a href="#">Action</a></li>
  40. <li><a href="#">Another action</a></li>
  41. <li><a href="#">Something else here</a></li>
  42. <li role="separator" class="divider"></li>
  43. <li><a href="#">Separated link</a></li>
  44. <li role="separator" class="divider"></li>
  45. <li><a href="#">One more separated link</a></li>
  46. </ul>
  47. </li>
  48. </ul>
  49.  
  50. </div><!-- /.navbar-collapse -->
  51. </nav>
  52. </div>
  53. </header>
  54.  
  55. <div class="container"></div>
  56. <div class="row">
  57. <!--
  58. what the col-sm-4 does is that it gives it a size of 4 and once
  59. it sizes down to a certain size, it goes all into a column
  60.  
  61. what the sm stands for is when the browser is at a small, you can also
  62. do a medium, large, extra small, etc.
  63. -->
  64. <div class="col-sm-6 col-xs-12">
  65. <div class="panel panel-primary">
  66. <div class="panel-heading">Widget 1</div>
  67. <div class="panel-body text-primary">
  68. Panel Content
  69. <a href="#" class="btn btn-primary">do something</a>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="col-sm-3 col-xs-6">
  74. <div class="panel panel-success">
  75. <div class="panel-heading">Widget 2</div>
  76. <div class="panel-body">
  77. Black text, <span class="text-success">Panel Content</span>
  78. <a href="#" class="btn btn-success">do something</a>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="col-sm-3 col-xs-6">
  83. <div class="panel panel-danger">
  84. <div class="panel-heading">Widget 3</div>
  85. <div class="panel-body text-danger">
  86. Panel Content
  87. <a href="#" class="btn btn-danger">do something</a>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93.  
  94. <!-- Latest compiled and minified JavaScript -->
  95. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  96.  
  97. </script>
  98. </body>
  99. </html>
  100.  
  101. <!--
  102. Bootstrap allows you to make responsive layouts, and responsive layouts are
  103. layouts that act responsively to the users browser and/or device
  104.  
  105. Style always goes on the top, and the actual coding goes on the bottom
  106. so that the style and webpage show first and all of the functionality comes
  107. last
  108.  
  109. What a container class does it gets your elements centered
  110. -->
  111. -----------------------------------------------------------------------------------------------------------------------------
  112. .darkBG
  113. {
  114. background: #999;
  115. color: white;
  116. }
  117.  
  118. .darkerBG
  119. {
  120. background: #666;
  121. color: white;
  122. }
  123.  
  124. .darkestBG
  125. {
  126. background: #333;
  127. color: white;
  128. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!