Cloudy River's Workshop: BootStrap

Showing posts with label BootStrap. Show all posts

Monday, October 26, 2015

Best Bootstrap Plugins for Web BI and Reporting

Bootstrap is the best web front end framework designed for responsive design and mobile first. Except for standard Bootstrap functionality, there are lots of popular Bootstrap Plugins you can apply for your Web Reporting and BI requirement.

Fuel UX

is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Add the fueluxclass to a page wrapper (usually either <html> tag or <body> tag)
```
<body class="fuelux">
```

Include the CSS on your page somewhere:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.11.5/css/fuelux.min.css" rel="stylesheet">

Include the JS on your page somewhere:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.5/js/fuelux.min.js"></script>

Fuel UX has an excellent datepicker, repeater, and tree control,

Date Range Picker

is a component creates a drop down from which you can select a range of date. The component relies on Bootstrap, JQuery, and Moments.js. You need to add following scripts and links on your page:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>

Clock Picker

is a unique clock style time picker for Bootstrap.

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap and JQuery are the only dependencies.

The component only used .popover and some of .btn styles of Bootstrap.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

metisMenu

Stylish menu will give your website a perfect weapon to attract visitors. metisMenu can be a solution for this, it’s a JQuery based menu plugin for twitter Bootstrap 3. Here in this menu, you can give effects like animated accordion and supported with auto collapse system.

<script 
src="metisMenu.js"></script>
<script>
  $(function () {
    $('#menu').metisMenu();
  });
</script>

Bootstrap WYSIHTML5

A Javascript plugin that makes it easy to create simple WYSIWYG editors.

JQuery File Uploader

A file upload widget which features multiple file selection, drag and drop, progess bars, validation and preview images.

BootstrapValidator

A JQuery plugin for validating forms within Bootstrap.

JQuery Pagination

A plugin that simplifies the usage of Bootstrap's Pagintion by using appropriate classes: .pagination, .active and .disabled.

Bootstrap Star Rating

A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Bootstrap Multiselect

A JQuery based plugin for using select inputs with the multiple attributes.

Bootstrap Video Player

A customizable HTML5 video player plugin for jQuery based on Bootstrap's UI.

Data Tables

Data Tables is the most popular table enhancing add on for Bootstrap. This plugin not only makes your tables sort-able, but it also makes use of the framework’s pagination controls and makes the data searchable. This component is Web BI/Reporting must have tool.

Bootstrap Datagrid

bs_grid is a Bootstrap based jQuery Datagrid plugin. It comes with advanced row selection, pagination, sorting as well as filtering. This bs_grid is fully customizable, responsive, localization and Works sound with Bootstrap or individual.

Social Buttons

Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Bootstrap Image Gallery

Bootstrap Image Gallery is a customizable image & video gallery extension to blueimp Gallery, a touch-enabled, responsive extension for images and videos in the modal dialog of the Bootstrap framework. It features swipe, mouse as well as navigation to keyboard, transition effects, fullscreen support and on-demand content loading. Bootstrap Image Gallery can be extended to display supplementary content types.

Source:
http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/
http://speckyboy.com/2014/06/16/plugins-for-extending-bootstrap/
https://medium.com/@themefisher/40-new-must-have-plugins-for-extending-twitter-bootstrap-possibilities-e2a79592c90b#.coqlx2gc7
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

Friday, October 23, 2015

Bootstrap 3 Responsive Design Introduction

To add Bootstrap 3, insert following code to your web page.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap requires HTML 5 doc type, so always put following at the beginning of your web page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

Bootstrap is mobile first, to ensure proper rendering and zooming, put following at the beginning of your web page.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width sets the page width to screen width of the device. initial-scale=1 sets the initial zoom level when the page was first loaded.

Bootstrap divides screen size into 4 categories, and named with 4 classes accordingly.

Extra Small < 768px named with "xs"
Small < 992px named with "sm"
Medium < 1200px named with "md"
Large >= 1200px named with "lg"

Bootstrap used 2 types of containers to wrap all other web contents:

Fixed width container which has different fixed size for above 4 screens

<div class="container">
</div>

Full width container which takes up 100% of width regardless of screen size

<div class="container-fluid">
</div>

Note containers are not nestable, so you can't put container inside another container.

Following showed a basic Bootstrap web page:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>
</body>

Bootstrap Grid System, one of the most powerful features, can create great responsive design for all kinds of screen.

Rows must be placed inside .container or .container-fluid for proper align and padding
Rows are used to create horizontal group of columns.
The grid has maximum 12 columns for each row, thus any extra rows would be displayed in a new row.
Each columns has padding, which are spacing between columns and can do align with other columns.

Basic Structure of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first * could be xs, sm, md, lg, representing the 4 classes for different screen size, and the last * could be 1,2,3,4. The last * adds up should be always 12.

Example of Bootstrap Grid:

<div class="container">
  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>
  <div class="row">
    <div class="col-sm-8"></div>
    <div class="col-sm-4"></div>
  </div>
  <div class="row">
     ...  
  </div>
</div>

The first row of columns will be stacked when the screen size is less than 992px. The second row of columns will be stacked when the screen size is less than 768px.

Note the 4 different classes for different screen size can be combined together to create more flexible layout.

For example, for following code, if the screen is big enough, all will be displayed in one row. However, if the screen get smaller, col-sm-4 will be useless, and all col-xs-6 will be effective, and the last column will be displayed in another row.

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Bootstrap table has following classes:
.table .tablestrip .table-bordered .table-hover .table-condensed .table-responsive

The .tablestrip adds zebra strips to a table.
The .table-bordered adds borders for all sides of the table and cells.
The .table-hover enables hover states on each row.
The .table-condensed makes a table more compact through reduce the cell padding by half.
The .table-responsive makes table scroll horizontally on devices with small screen. Note it should be used with <div> outside the table.

<div class="table-responsive">
  <table class="table tablestrip table-bordered table-hover table-condensed">
    ...
  </table>
</div>

Bootstrap table row and column has following classes:
.active .success .info .warning .danger
.active adds hover color to table cells.

<tr class="success">
  <td>John</td>
  <td>Doe</td>
  <td>john@example.com</td>
</tr>

Bootstrap will let some elements show or hide, depending on the screen size:

Images can scale based on screen size by using .img-responsive class. The image will be scale while keep its aspect ratio. To center responsive image, using .center-block class.

Source:
http://getbootstrap.com/css/
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
http://www.devx.com/webdev/easily-create-responsive-websites-using-bootstrap.html

Friday, October 16, 2015

How to applying Bootstrap 3 Fluid theme to ASP.Net MVC 5 Project

After you installed a fully functional ASP.Net MVC 5 template, you can use it to create a new project, which has installed Bootstrap 3 already, as following screenshot showed.

The default bootstrap template used in the template is Jumbtron, Jumbtron is not a fluid layout template, which means it has fixed screen layout, thus can't adapt for different screen size with those devices such as iPad, or smart phone.

So the next thing is to change the css template to Justified-Nav, which is a fluid layout template from bootstrap website, will re-align itself based on the different screen size. You can get the css file from here. For doing this, you can right click on the Content folder from Solution Explorer and choose Add New Item, and choose Style Sheet file format, and paste the following content from bootstrap website into the new file, and then rename it as justified-nav.css.

body {
  padding-top: 20px;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Customize the nav-justified links to be fill the entire space of the .navbar */

.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 0;
  font-weight: bold;
  color: #777;
  text-align: center;
  background-color: #e5e5e5; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
  background-image:         linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-repeat: repeat-x; /* Repeat the gradient */
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #ddd;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
          box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
  border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}

@media (min-width: 768px) {
  .nav-justified {
    max-height: 52px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
    border-radius: 5px 0 0 5px;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
    border-radius: 0 5px 5px 0;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}

Then you need to add the new css file into BundleConfig, find the following script:

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/justified-nav.css",));

Add replace them with

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/justified-nav.css"));

Now open _Layout.cshtml from Views folder:

Replace the section of div tag with class="navbar navbar-inverse navbar-fixed-top":

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

with following:

    <div class="container">
        <div class="masthead">
            <h3 class="text-muted">@Html.ActionLink("Application name", "Index", "Home")</h3>
        </div>
        <ul class="nav nav-justified">
                <li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "active" })</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
         @Html.Partial("_LoginPartial")
    </div>

Open Index.cshtml from Views\Home, replace following tag class="col-md-4" to following tag class="col-lg-4".

Now you can compile your project and your final output would be like this:

Source:
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-asp-net-mvc-5