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">
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.