Click here to Skip to main content
13,629,396 members
Click here to Skip to main content

Stats

33K 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>
<head>
    <title>Twitter Bootstrap Example</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
    <body>
        
        <!-- The main container. -->
        <div class="container">
            
            <!-- A menu bar. -->
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#">Twitter Bootstrap Example</a>
                    <ul class="nav">
                        <li><a href="Default.cshtml">Home</a></li>
                        <li><a href="About.cshtml">About</a></li>
                        <li class="active"><a href="Contact.cshtml">Contact</a></li>
                    </ul>
                </div>
            </div>

            <h1>Contact</h1>
            <p>This is the Contact page.</p>
            
            <hr />
            
            <!-- Button to trigger modal -->
            <a href="#popup" role="button" class="btn" data-toggle="modal">Show Popup</a>
 
            <!-- Modal -->
            <div id="popup" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="popupLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="popupLabel">Login</h3>
              </div>
              <div class="modal-body">
                <p>Enter login details...</p>
              </div>
              <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn-primary">Login</button>
              </div>
            </div>

        </div>
        
        <!-- Include jQuery and Boostrap. -->
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="bootstrap/js/bootstrap.min.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
Web02 | 2.8.180712.1 | Last Updated 16 Dec 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid