Bootstrap Code Samples

Twitter Bootstrap makes life easy. If you are not much into designing layouts from pure CSS, twitter-bootstrap is ideal for you. Following shows some code samples that you might often need. Setting up bootstrap is trivial.

Setting-Up

 - Download Bootstrap from http://getbootstrap.com/
- Unzip the folder. You may find following folders in it.


- Include these three folders in your Project folder.
- Add link to your index.html to bootstrap.css within in <head> tag as follows

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

- Add bootstrap script tags just above the </body> tag. Make sure you have jquery.js file

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

- That's it. To check if you have properly setup bootstrap, Write this line of code within the body section

<button class="btn btn-success">Test</button>

- Open up index.html in a browser. You should see green color Test button on the screen.


Nav-Bar Sample

<!-- Fixed Navigation Bar With Drop Down Menus -->
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Manoj Enterprises</a>
</div>
<div class="navbar-collapse collapse"> <ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li><a href="#">Dhamma Books</a></li>
<li><a href="#">Dayawnsa Publications</a></li>
<li><a href="#">Mahamevna Publications</a></li>
<li><a href="#">Newspapers</a></li>
<li><a href="#">Magazines</a></li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</div>
view raw gistfile1.html hosted with ❤ by GitHub

Carousel Sample 

<!-- Carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->
view raw gistfile1.html hosted with ❤ by GitHub

Grid-System Sample 

<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
view raw gistfile1.html hosted with ❤ by GitHub

Comments

  1. AnonymousJuly 12, 2019 at 6:31 AM

    This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

Dependency Injection in ASP.NET MVC 5 with StructureMap

Dependency Injection(DI) is a design pattern that let you write loosely coupled testable code. Typically your classes depend on other classes. Take a look at the following example. The above example shows the " HomeController " of an asp.net mvc application. Within the index method, you can see that it requires to create an instance of " Student " class to get the full name of a student. It is very clear that the Index method is tightly coupled with the Student class.  This is a disadvantage when it comes to testing HomeController . Suppose that you have other methods, with similar types of class dependencies. So, each time when you test the code, you have to pass an actual instance Student class. This is tedious. You don't have the luxury of passing a fake student class to easily test your controllers.  So how do we decouple the Student class from HomeController? This is where DI comes in handy. You can inject dependencies in several ways. Today i will sho...
Read more

Real-time web with Node.js & Socket.io

Image
If you are a .net developer, you may be familiar with ASP.net SignalR for real-time web development. It's one of the coolest libraries for ASP.net that allows bi-directional communication between a server and a client. For more details refer  http://www.asp.net/signalr .  This blog post is an intro to use Node.js and Socket.io to achieve real-time web communication with pure JavaScript using a simple chat program example. Socket.io is a library that makes our lives easy to work with web sockets. Of course, in the Javascript world, there are hundred other libraries available to implement web sockets,  examples .  But i like the simplicity of Socket.io.  Step 01 : Setting up Node.js Depending on the operating system you are using, download Node.js from the official site  here . Installation process of both Windows and OSX is pretty much the same. Double click the setup file and follow the straightforward instruction. For...
Read more

First Look at AngularJS 2.0

Image
AngularJS 2.0 developer preview has been released! This blog post is to experience the new features in the framework with a simple angular2 application. Heads Up : AngularJS 2.0 is written in TypeScript. TypeScript is a super-set of ES6 which is a super-set of ES5 which is currently the browsers fully supported version of JavaScript.  So when writing angular2 components, we can use choose among TypeScript, ES6, ES5 or Dart if you will. For this blog post I use TypeScript. Please refer  5 Min Quick Start Guide  to setup angular2 development environment. Once you have setup the environment and followed the guide, you will be able to see a similar result as follows. Now let's add few more features to this. We will create a shopping list where a user can view the list, add a new item or remove a item from the list. So to begin, let's create the listItems array. Change the app.ts file as follows. Let's create the list.html file which is the view for this...
Read more