Advertisement
Guest User

Untitled

a guest
May 26th, 2015
219
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.50 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  8. <title>Bootstrap 101 Template</title>
  9.  
  10. <!-- Bootstrap -->
  11. <link href="css/bootstrap.min.css" rel="stylesheet">
  12. <link href="css/style.css" rel="stylesheet">
  13.  
  14. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  16. <!--[if lt IE 9]>
  17. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  18. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  19. <![endif]-->
  20. </head>
  21. <body>
  22.  
  23.  
  24. <div class="container">
  25. <nav class="navbar navbar-default">
  26. <div class="container-fluid">
  27. <!-- Brand and toggle get grouped for better mobile display -->
  28. <div class="navbar-header">
  29. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  30. <span class="sr-only">Toggle navigation</span>
  31. <span class="icon-bar"></span>
  32. <span class="icon-bar"></span>
  33. <span class="icon-bar"></span>
  34. </button>
  35. <a class="navbar-brand" href="#">Brand</a>
  36. </div>
  37.  
  38. <!-- Collect the nav links, forms, and other content for toggling -->
  39. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  40. <ul class="nav navbar-nav">
  41. <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  42. <li><a href="#">Link</a></li>
  43. <li class="dropdown">
  44. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
  45. <ul class="dropdown-menu" role="menu">
  46. <li><a href="#">Action</a></li>
  47. <li><a href="#">Another action</a></li>
  48. <li><a href="#">Something else here</a></li>
  49. <li class="divider"></li>
  50. <li><a href="#">Separated link</a></li>
  51. <li class="divider"></li>
  52. <li><a href="#">One more separated link</a></li>
  53. </ul>
  54. </li>
  55. </ul>
  56. <form class="navbar-form navbar-left" role="search">
  57. <div class="form-group">
  58. <input type="text" class="form-control" placeholder="Search">
  59. </div>
  60. <button type="submit" class="btn btn-default">Submit</button>
  61. </form>
  62. <ul class="nav navbar-nav navbar-right">
  63. <li><a href="#">Link</a></li>
  64. <li class="dropdown">
  65. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
  66. <ul class="dropdown-menu" role="menu">
  67. <li><a href="#">Action</a></li>
  68. <li><a href="#">Another action</a></li>
  69. <li><a href="#">Something else here</a></li>
  70. <li class="divider"></li>
  71. <li><a href="#">Separated link</a></li>
  72. </ul>
  73. </li>
  74. </ul>
  75. </div><!-- /.navbar-collapse -->
  76. </div><!-- /.container-fluid -->
  77. </nav>
  78.  
  79.  
  80.  
  81.  
  82.  
  83. <div class="row">
  84.  
  85. <div class="col-md-3 col-sm-6">
  86. <h4>Heading</h4>
  87. <p>
  88.  
  89. Suspendisse urna sapien, molestie vitae pretium nec, tincidunt id risus. Vivamus pretium nulla turpis, id volutpat lacus. Pellentesque vitae erat in nisl facilisis accumsan sed vel ligula. Nulla facilisi. Aenean vel mollis felis. Phasellus malesuada nulla id dolor dignissim ac iaculis libero tempor. Ut eget ante nisi, vitae consequat libero. Phasellus at feugiat sapien. Vivamus sem nunc, dictum et iaculis vitae, ultricies sit amet ipsum. Vestibulum eu ipsum velit, ut ornare est. Cras urna mi, feugiat eu elementum ut, dignissim ac lectus.
  90. </p>
  91. <img src="images/people.jpg" class="img-circle img-thumbnail">
  92. </div>
  93.  
  94.  
  95.  
  96. <div class="col-md-3 col-sm-6">
  97. <h4>Heading</h4>
  98. <p>
  99.  
  100. Suspendisse urna sapien, molestie vitae pretium nec, tincidunt id risus. Vivamus pretium nulla turpis, id volutpat lacus. Pellentesque vitae erat in nisl facilisis accumsan sed vel ligula. Nulla facilisi. Aenean vel mollis felis. Phasellus malesuada nulla id dolor dignissim ac iaculis libero tempor. Ut eget ante nisi, vitae consequat libero. Phasellus at feugiat sapien. Vivamus sem nunc, dictum et iaculis vitae, ultricies sit amet ipsum. Vestibulum eu ipsum velit, ut ornare est. Cras urna mi, feugiat eu elementum ut, dignissim ac lectus.
  101. </p>
  102.  
  103. <button class="btn btn-danger btn-xs">
  104. <span class="glyphicon glyphicon-bell " aria-hidden="true"></span>
  105. Something
  106. </button>
  107.  
  108. </div>
  109.  
  110.  
  111.  
  112. <div class="col-md-3 col-sm-6">
  113. <h4>Heading</h4>
  114. <p>
  115.  
  116. Suspendisse urna sapien, molestie vitae pretium nec, tincidunt id risus. Vivamus pretium nulla turpis, id volutpat lacus. Pellentesque vitae erat in nisl facilisis accumsan sed vel ligula. Nulla facilisi. Aenean vel mollis felis. Phasellus malesuada nulla id dolor dignissim ac iaculis libero tempor. Ut eget ante nisi, vitae consequat libero. Phasellus at feugiat sapien. Vivamus sem nunc, dictum et iaculis vitae, ultricies sit amet ipsum. Vestibulum eu ipsum velit, ut ornare est. Cras urna mi, feugiat eu elementum ut, dignissim ac lectus.
  117. </p>
  118.  
  119. </div>
  120.  
  121. <div class="col-md-3 col-sm-6">
  122. <h4>Heading</h4>
  123. <p>
  124.  
  125. Suspendisse urna sapien, molestie vitae pretium nec, tincidunt id risus. Vivamus pretium nulla turpis, id volutpat lacus. Pellentesque vitae erat in nisl facilisis accumsan sed vel ligula. Nulla facilisi. Aenean vel mollis felis. Phasellus malesuada nulla id dolor dignissim ac iaculis libero tempor. Ut eget ante nisi, vitae consequat libero. Phasellus at feugiat sapien. Vivamus sem nunc, dictum et iaculis vitae, ultricies sit amet ipsum. Vestibulum eu ipsum velit, ut ornare est. Cras urna mi, feugiat eu elementum ut, dignissim ac lectus.
  126. </p>
  127.  
  128. </div>
  129.  
  130.  
  131. </div>
  132.  
  133.  
  134. </div>
  135.  
  136.  
  137.  
  138.  
  139. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  140. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  141. <!-- Include all compiled plugins (below), or include individual files as needed -->
  142. <script src="js/bootstrap.min.js"></script>
  143. </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement