API tools faq
paste
Advertisement
wingman007

bootstrap_less_in_broser

wingman007
May 19th, 2014
211
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Less</title>
  5.         <link rel="stylesheet/less" type="text/css" href="bootstrap-3.1.1/less/bootstrap.less" />
  6.        
  7.         <link rel="stylesheet/less" type="text/css" href="custom_override_style.less" />
  8.        
  9.         <script src="less.js-master/dist/less-1.7.0.min.js" type="text/javascript"></script>
  10.  
  11.     </head>
  12.     <body>
  13.         <h3>Less parses the less files and creates css files. They get loaded and the page works exactly the same way as it was loaded with css files.</h3>
  14.         <h3>The page must be loaded from the server!</h3>
  15.         <!-- Standard button -->
  16.         <button type="button" class="btn btn-default">Default</button>
  17.  
  18.         <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
  19.         <button type="button" class="btn btn-primary">Primary</button>
  20.  
  21.         <!-- Indicates a successful or positive action -->
  22.         <button type="button" class="btn btn-success">Success</button>
  23.  
  24.         <!-- Contextual button for informational alert messages -->
  25.         <button type="button" class="btn btn-info">Info</button>
  26.  
  27.         <!-- Indicates caution should be taken with this action -->
  28.         <button type="button" class="btn btn-warning">Warning</button>
  29.  
  30.         <!-- Indicates a dangerous or potentially negative action -->
  31.         <button type="button" class="btn btn-danger">Danger</button>
  32.  
  33.         <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
  34.         <button type="button" class="btn btn-link">Link</button>
  35.    
  36.     <nav class="navbar navbar-inverse" role="navigation">
  37.       <div class="container-fluid">
  38.         <!-- Brand and toggle get grouped for better mobile display -->
  39.         <div class="navbar-header">
  40.           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
  41.             <span class="sr-only">Toggle navigation</span>
  42.             <span class="icon-bar"></span>
  43.             <span class="icon-bar"></span>
  44.             <span class="icon-bar"></span>
  45.           </button>
  46.           <a class="navbar-brand" href="#">Brand</a>
  47.         </div>
  48.  
  49.         <!-- Collect the nav links, forms, and other content for toggling -->
  50.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
  51.           <ul class="nav navbar-nav">
  52.             <li class="active"><a href="#">Home</a></li>
  53.             <li><a href="#">Link</a></li>
  54.             <li><a href="#">Link</a></li>
  55.           </ul>
  56.         </div><!-- /.navbar-collapse -->
  57.       </div><!-- /.container-fluid -->
  58.     </nav>
  59.    
  60.  
  61.         <div class="container">        
  62.         <div class="row">
  63.                 <div class="col-md-4 col-sm-5">
  64.                     <h1>Test</h1>
  65.                     <p> <span class="glyphicon glyphicon-star"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac commodo sem, vitae varius ante. Fusce id imperdiet massa. Ut blandit, tortor mattis dapibus volutpat, eros ante consectetur diam, nec faucibus purus arcu at tortor. In et libero lobortis, pharetra neque non, tempor ipsum. Sed aliquam tempus magna nec semper. Vestibulum imperdiet auctor vulputate. Proin porta rhoncus viverra. Cras elementum facilisis libero, at aliquet leo sodales sed. Aliquam ullamcorper, augue in interdum pellentesque, elit ligula ullamcorper massa, vitae aliquam justo nibh vitae urna. Nunc at gravida nisi, sit amet ornare urna.
  66.  
  67. Fusce eget tincidunt augue, vel euismod ligula. Ut vulputate odio porta pellentesque gravida. Cras et turpis neque. Vivamus ultricies imperdiet vestibulum. Donec semper, urna quis vehicula vulputate, sem nisi aliquet neque, in dictum est elit a sem. Sed pretium consequat nibh, eget consequat ligula pharetra sit amet. Sed tincidunt lectus a dapibus adipiscing. Vivamus id porta mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla feugiat, nisl vitae lobortis tempus, purus arcu rutrum sapien, a adipiscing metus felis eget ipsum. Fusce blandit nunc in cursus hendrerit. Morbi bibendum, odio non rhoncus condimentum, tellus lectus dictum quam, in iaculis tortor velit at tellus.
  68.  
  69. Nunc leo orci, elementum nec elementum vel, hendrerit vitae tortor. Nunc luctus pharetra magna at scelerisque. Nullam faucibus semper suscipit. Nam ut mollis mi. Nunc imperdiet interdum consequat. Maecenas ornare libero non orci sagittis iaculis. Nulla risus felis, volutpat et felis ut, mollis pellentesque tellus. Etiam egestas imperdiet pellentesque. Nam eu nibh ac mauris feugiat fringilla vel et urna. Morbi interdum non magna in rhoncus. Donec eget felis in sem hendrerit faucibus a eu orci. In hac habitasse platea dictumst. Sed eget neque eu turpis congue pretium in vel orci. Suspendisse feugiat mi elit, et blandit est posuere nec.
  70.  
  71. Aliquam adipiscing tortor vel aliquet tincidunt. Nulla facilisi. In elementum sapien tortor, a tempus turpis condimentum vitae. Nam vestibulum pharetra auctor. Nulla et quam laoreet, ornare nisl eu, porttitor enim. Phasellus auctor justo libero, a sodales nisl pharetra non. Nunc id turpis accumsan, viverra sem sit amet, auctor lectus. Ut in feugiat orci, vel adipiscing augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in fringilla quam. Donec gravida, purus nec congue porta, lectus nibh posuere erat, a blandit turpis sem quis diam.
  72.  
  73. Aliquam eleifend nulla tristique, convallis libero eu, blandit lacus. Etiam ornare nisi in ipsum sollicitudin dictum. Nunc pellentesque dignissim cursus. Vivamus vehicula purus ut risus dapibus, eget volutpat nibh fringilla. Praesent ac gravida felis, sed tincidunt est. Fusce condimentum augue ut orci bibendum gravida. Sed ut tincidunt diam. Morbi eu lectus ac libero lobortis pretium quis at enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nam fermentum ante vitae eros dictum, et commodo metus pharetra. Nullam luctus arcu eu aliquam eleifend. Nunc at massa aliquet, ullamcorper metus et, congue eros. Vivamus blandit varius vehicula. Vestibulum accumsan ac urna sit amet lobortis. Praesent vulputate urna vel nisl consectetur condimentum.
  74.                     </p>
  75.                 </div>
  76.                 <div class="col-md-6">
  77.                     <h1>Test</h1>
  78.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac commodo sem, vitae varius ante. Fusce id imperdiet massa. Ut blandit, tortor mattis dapibus volutpat, eros ante consectetur diam, nec faucibus purus arcu at tortor. In et libero lobortis, pharetra neque non, tempor ipsum. Sed aliquam tempus magna nec semper. Vestibulum imperdiet auctor vulputate. Proin porta rhoncus viverra. Cras elementum facilisis libero, at aliquet leo sodales sed. Aliquam ullamcorper, augue in interdum pellentesque, elit ligula ullamcorper massa, vitae aliquam justo nibh vitae urna. Nunc at gravida nisi, sit amet ornare urna.
  79.  
  80. Fusce eget tincidunt augue, vel euismod ligula. Ut vulputate odio porta pellentesque gravida. Cras et turpis neque. Vivamus ultricies imperdiet vestibulum. Donec semper, urna quis vehicula vulputate, sem nisi aliquet neque, in dictum est elit a sem. Sed pretium consequat nibh, eget consequat ligula pharetra sit amet. Sed tincidunt lectus a dapibus adipiscing. Vivamus id porta mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla feugiat, nisl vitae lobortis tempus, purus arcu rutrum sapien, a adipiscing metus felis eget ipsum. Fusce blandit nunc in cursus hendrerit. Morbi bibendum, odio non rhoncus condimentum, tellus lectus dictum quam, in iaculis tortor velit at tellus.
  81.  
  82. Nunc leo orci, elementum nec elementum vel, hendrerit vitae tortor. Nunc luctus pharetra magna at scelerisque. Nullam faucibus semper suscipit. Nam ut mollis mi. Nunc imperdiet interdum consequat. Maecenas ornare libero non orci sagittis iaculis. Nulla risus felis, volutpat et felis ut, mollis pellentesque tellus. Etiam egestas imperdiet pellentesque. Nam eu nibh ac mauris feugiat fringilla vel et urna. Morbi interdum non magna in rhoncus. Donec eget felis in sem hendrerit faucibus a eu orci. In hac habitasse platea dictumst. Sed eget neque eu turpis congue pretium in vel orci. Suspendisse feugiat mi elit, et blandit est posuere nec.
  83.  
  84. Aliquam adipiscing tortor vel aliquet tincidunt. Nulla facilisi. In elementum sapien tortor, a tempus turpis condimentum vitae. Nam vestibulum pharetra auctor. Nulla et quam laoreet, ornare nisl eu, porttitor enim. Phasellus auctor justo libero, a sodales nisl pharetra non. Nunc id turpis accumsan, viverra sem sit amet, auctor lectus. Ut in feugiat orci, vel adipiscing augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in fringilla quam. Donec gravida, purus nec congue porta, lectus nibh posuere erat, a blandit turpis sem quis diam.
  85.  
  86. Aliquam eleifend nulla tristique, convallis libero eu, blandit lacus. Etiam ornare nisi in ipsum sollicitudin dictum. Nunc pellentesque dignissim cursus. Vivamus vehicula purus ut risus dapibus, eget volutpat nibh fringilla. Praesent ac gravida felis, sed tincidunt est. Fusce condimentum augue ut orci bibendum gravida. Sed ut tincidunt diam. Morbi eu lectus ac libero lobortis pretium quis at enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Nam fermentum ante vitae eros dictum, et commodo metus pharetra. Nullam luctus arcu eu aliquam eleifend. Nunc at massa aliquet, ullamcorper metus et, congue eros. Vivamus blandit varius vehicula. Vestibulum accumsan ac urna sit amet lobortis. Praesent vulputate urna vel nisl consectetur condimentum.</p>
  87.                 </div>
  88.             </div>
  89.         </div>
  90.        
  91. <!-- Button trigger modal -->
  92. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  93.   Launch demo modal
  94. </button>
  95.  
  96. <!-- Modal -->
  97. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  98.   <div class="modal-dialog">
  99.     <div class="modal-content">
  100.       <div class="modal-header">
  101.         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  102.         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  103.       </div>
  104.       <div class="modal-body">
  105.         ...
  106.       </div>
  107.       <div class="modal-footer">
  108.         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  109.         <button type="button" class="btn btn-primary">Save changes</button>
  110.       </div>
  111.     </div>
  112.   </div>
  113. </div>
  114.     </body>
  115. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!