Click here to Skip to main content
13,665,371 members
Click here to Skip to main content

Stats

33.5K views
1.1K downloads
16 bookmarked
Posted 16 Dec 2012
Licenced CPOL

Customized Twitter Bootstrap sites in WebMatrix

, 16 Dec 2012
How to create and customize a Twitter Bootstrap site with WebMatrix 2 and OrangeBits Compiler
TwitterBootstrap1
App_Data
packages
Microsoft.AspNet.Razor.2.0.20710.0
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.2.0.20710.0
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Administration.2.0.20710.0
Microsoft.AspNet.WebPages.Administration.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Data.2.0.20710.0
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.WebData.2.0.20710.0
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.1.0.0.0
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
NuGet.Core.1.6.2
NuGet.Core.1.6.2.nupkg
bin
Microsoft.Web.Infrastructure.dll
NuGet.Core.dll
System.Web.Helpers.dll
System.Web.Razor.dll
System.Web.WebPages.Administration.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
WebMatrix.Data.dll
WebMatrix.WebData.dll
bootstrap
css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
favicon.ico
TwitterBootstrap2
App_Data
packages
Microsoft.AspNet.Razor.2.0.20710.0
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.2.0.20710.0
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Administration.2.0.20710.0
Microsoft.AspNet.WebPages.Administration.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Data.2.0.20710.0
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.WebData.2.0.20710.0
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.1.0.0.0
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
NuGet.Core.1.6.2
NuGet.Core.1.6.2.nupkg
bootstrap
css
less
tests
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
favicon.ico
Microsoft.AspNet.Razor.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Administration.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.Data.2.0.20710.0.nupkg
Microsoft.AspNet.WebPages.WebData.2.0.20710.0.nupkg
Microsoft.Web.Infrastructure.1.0.0.0.nupkg
NuGet.Core.1.6.2.nupkg
bin
Microsoft.Web.Infrastructure.dll
NuGet.Core.dll
System.Web.Helpers.dll
System.Web.Razor.dll
System.Web.WebPages.Administration.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
WebMatrix.Data.dll
WebMatrix.WebData.dll
glyphicons-halflings.png
glyphicons-halflings-white.png
favicon.ico
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Buttons &middot; Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 30px;
        padding-bottom: 30px;
      }
    </style>
    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
  </head>

  <body>

    <div class="container">

      <h2>Dropups</h2>
      <div class="btn-toolbar">
        <div class="btn-group dropup">
          <button class="btn">Dropup</button>
          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-primary">Dropup</button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-danger">Dropup</button>
          <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-warning">Dropup</button>
          <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-success">Dropup</button>
          <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-info">Dropup</button>
          <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
        <div class="btn-group dropup">
          <button class="btn btn-inverse">Dropup</button>
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div><!-- /btn-group -->
      </div><!-- /btn-toolbar -->


    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../../docs/assets/js/jquery.js"></script>
    <script src="../../docs/assets/js/bootstrap-transition.js"></script>
    <script src="../../docs/assets/js/bootstrap-alert.js"></script>
    <script src="../../docs/assets/js/bootstrap-modal.js"></script>
    <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="../../docs/assets/js/bootstrap-tab.js"></script>
    <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="../../docs/assets/js/bootstrap-popover.js"></script>
    <script src="../../docs/assets/js/bootstrap-button.js"></script>
    <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
    <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
    <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gianmaria Gregori
Chief Technology Officer Federfarma Pavia
Italy Italy
No Biography provided

You may also be interested in...

Pro
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04-2016 | 2.8.180810.1 | Last Updated 16 Dec 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid