Bootstrap

In this demo section, we will show you how to use the Bootstrap and its responsive features along with jQWidgets.

Example - Basic template

Copy the HTML below to begin working with a minimal Bootstrap & jQWidgets document 
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Template</title>
    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQWidgets CSS -->
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <link href="jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
    <!-- jQWidgets core JavaScript -->
    <script src="jqwidgets/jqxcore.js"></script>
    <!-- ================================================== -->
    <!-- Add addition JavaScript files here -->
    <script type="text/javascript">
        $(document).ready(function () {
            // your JavaScript code here.
        });
    </script>
</body>
</html>

Try it: Basic Template

To use the jQWidgets Bootstrap Theme, add the jqx.base.css and jqx.bootstrap.css to your <head>.
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>. 
    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall we don't recommend this on every site, so use caution! 
    
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element. <img src="..." class="img-responsive" alt="Responsive image">

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Look to the examples for applying these principles to your code.

Grids and full-width layouts

Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows.

For more details about the Twitter Bootstrap's Grid system, look at: Grid System.