539 lines
14 KiB
PHP
539 lines
14 KiB
PHP
<?php
|
||
|
||
//initilize the page
|
||
require_once 'init.web.php';
|
||
|
||
/*---------------- PHP Custom Scripts ---------
|
||
|
||
YOU CAN SET CONFIGURATION VARIABLES HERE BEFORE IT GOES TO NAV, RIBBON, ETC.
|
||
E.G. $page_title = "Custom Title" */
|
||
|
||
$page_title = "Grid";
|
||
|
||
/* ---------------- END PHP Custom Scripts ------------- */
|
||
|
||
//include header
|
||
//you can add your custom css in $page_css array.
|
||
//Note: all css files are inside css/ folder
|
||
$page_css[] = "your_style.css";
|
||
include("inc/header.php");
|
||
|
||
//include left panel (navigation)
|
||
//follow the tree in inc/config.ui.php
|
||
$page_nav["ui_elements"]["sub"]["grid"]["active"] = true;
|
||
include("inc/nav.php");
|
||
|
||
?>
|
||
<!-- ==========================CONTENT STARTS HERE ========================== -->
|
||
<style>
|
||
.show-grid [class^="col-"] {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
background-color: rgba(61, 106, 124, 0.15);
|
||
border: 1px solid rgba(61, 106, 124, 0.2);
|
||
}
|
||
|
||
.show-grid {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
th small {
|
||
font-size:12px;
|
||
display:block;
|
||
color:#8D8D8D;
|
||
font-weight:normal;
|
||
}
|
||
|
||
/*
|
||
* Responsive tests
|
||
*
|
||
* Generate a set of tests to show the responsive utilities in action.
|
||
*/
|
||
|
||
/* Responsive (scrollable) doc tables */
|
||
.table-responsive .highlight pre {
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Utility classes table */
|
||
.bs-table th small,
|
||
.responsive-utilities th small {
|
||
display: block;
|
||
font-weight: normal;
|
||
color: #999;
|
||
font-size:12px;
|
||
}
|
||
.responsive-utilities tbody th {
|
||
font-weight: normal;
|
||
}
|
||
.responsive-utilities td {
|
||
text-align: center;
|
||
}
|
||
.responsive-utilities td.is-visible {
|
||
color: rgba(61, 106, 124, 1);
|
||
background-color: rgba(61, 106, 124, 0.07) !important;
|
||
}
|
||
.responsive-utilities td.is-hidden {
|
||
color: #ccc;
|
||
background-color: #f9f9f9 !important;
|
||
}
|
||
|
||
/* Responsive tests */
|
||
.responsive-utilities-test {
|
||
margin-top: 5px;
|
||
}
|
||
.responsive-utilities-test .col-xs-6 {
|
||
margin-bottom: 10px;
|
||
}
|
||
.responsive-utilities-test span {
|
||
padding: 15px 10px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
line-height: 1.1;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
}
|
||
.visible-on .col-xs-6 .hidden-xs,
|
||
.visible-on .col-xs-6 .hidden-sm,
|
||
.visible-on .col-xs-6 .hidden-md,
|
||
.visible-on .col-xs-6 .hidden-lg,
|
||
.hidden-on .col-xs-6 .visible-xs,
|
||
.hidden-on .col-xs-6 .visible-sm,
|
||
.hidden-on .col-xs-6 .visible-md,
|
||
.hidden-on .col-xs-6 .visible-lg {
|
||
color: #999;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.visible-on .col-xs-6 .visible-xs,
|
||
.visible-on .col-xs-6 .visible-sm,
|
||
.visible-on .col-xs-6 .visible-md,
|
||
.visible-on .col-xs-6 .visible-lg,
|
||
.hidden-on .col-xs-6 .hidden-xs,
|
||
.hidden-on .col-xs-6 .hidden-sm,
|
||
.hidden-on .col-xs-6 .hidden-md,
|
||
.hidden-on .col-xs-6 .hidden-lg {
|
||
color: #468847;
|
||
background-color: #dff0d8;
|
||
border: 1px solid #d6e9c6;
|
||
}
|
||
</style>
|
||
|
||
<!-- MAIN PANEL -->
|
||
<div id="main" role="main">
|
||
|
||
<?php
|
||
//configure ribbon (breadcrumbs) array("name"=>"url"), leave url empty if no url
|
||
//$breadcrumbs["New Crumb"] => "http://url.com"
|
||
$breadcrumbs["UI Elements"] = "";
|
||
include("inc/ribbon.php");
|
||
?>
|
||
|
||
<!-- MAIN CONTENT -->
|
||
<div id="content">
|
||
|
||
<div class="well">
|
||
<h1>Grid options</h1>
|
||
<p>
|
||
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
||
<br>
|
||
<br>
|
||
</p>
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-sm-3">
|
||
|
||
<img src="img/demo/responseimg.png" alt="" style="max-width:300px; width:100%;">
|
||
|
||
<br>
|
||
<h3>BuiltWith Bootstrap</h3>
|
||
Bootstrap is made to not only look and behave great in the latest desktop browsers,
|
||
but in tablet and smartphone browsers too. It’s packed with great features. Such as the 12-column responsive mobile first grid,
|
||
dozens of components, plugins and more!
|
||
|
||
</div>
|
||
<div class="col-sm-9">
|
||
|
||
<table class="table table-bordered table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th> Extra small devices <small>Phones (<768px)</small></th>
|
||
<th> Small devices <small>Tablets (≥768px)</small></th>
|
||
<th> Medium devices <small>Desktops (≥992px)</small></th>
|
||
<th> Large devices <small>Desktops (≥1200px)</small></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th>Grid behavior</th>
|
||
<td>Horizontal at all times</td>
|
||
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Max container width</th>
|
||
<td>None (auto)</td>
|
||
<td>750px</td>
|
||
<td>970px</td>
|
||
<td>1170px</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Class prefix</th>
|
||
<td>
|
||
<code>
|
||
.col-xs-
|
||
</code></td>
|
||
<td>
|
||
<code>
|
||
.col-sm-
|
||
</code></td>
|
||
<td>
|
||
<code>
|
||
.col-md-
|
||
</code></td>
|
||
<td>
|
||
<code>
|
||
.col-lg-
|
||
</code></td>
|
||
</tr>
|
||
<tr>
|
||
<th># of columns</th>
|
||
<td colspan="4">12</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Max column width</th>
|
||
<td class="text-muted">Auto</td>
|
||
<td>60px</td>
|
||
<td>78px</td>
|
||
<td>95px</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Gutter width</th>
|
||
<td colspan="4">30px (15px on each side of a column)</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Nestable</th>
|
||
<td colspan="4">Yes</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Offsets</th>
|
||
<td colspan="1" class="text-muted">N/A</td>
|
||
<td colspan="3">Yes</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Column ordering</th>
|
||
<td class="text-muted">N/A</td>
|
||
<td colspan="3">Yes</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<h6>Example: Stacked-to-horizontal</h6>
|
||
<p>
|
||
Using a single set of <code>
|
||
.col-md-*</code>
|
||
grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.
|
||
</p>
|
||
|
||
<div class="well">
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
<div class="col-md-1">
|
||
.col-md-1
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-8">
|
||
.col-md-8
|
||
</div>
|
||
<div class="col-md-4">
|
||
.col-md-4
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<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 show-grid">
|
||
<div class="col-md-6">
|
||
.col-md-6
|
||
</div>
|
||
<div class="col-md-6">
|
||
.col-md-6
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h6>Example: Mobile and desktop</h6>
|
||
<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
|
||
|
||
<div class="well">
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
|
||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-xs-6">.col-xs-6</div>
|
||
<div class="col-xs-6">.col-xs-6</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h6>Example: Mobile, tablet, desktops</h6>
|
||
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
|
||
|
||
<div class="well">
|
||
<div class="row show-grid">
|
||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||
<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
|
||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
|
||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||
<div class="clearfix visible-xs"></div>
|
||
<div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h6>Offsetting columns</h6>
|
||
<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
|
||
|
||
<div class="well">
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||
</div>
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h6>Nesting columns</h6>
|
||
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
|
||
|
||
<div class="well">
|
||
|
||
<div class="row show-grid">
|
||
<div class="col-md-12">
|
||
Level 1: .col-md-12
|
||
<div class="row show-grid">
|
||
<div class="col-md-6">
|
||
Level 2: .col-md-6
|
||
</div>
|
||
<div class="col-md-6">
|
||
Level 2: .col-md-6
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<hr class="simple">
|
||
|
||
<div class="well">
|
||
|
||
<h1>Responsive utilities</h1>
|
||
|
||
<p class="alert alert-info">
|
||
<strong>
|
||
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
|
||
</strong>
|
||
</p>
|
||
|
||
<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
|
||
|
||
|
||
<h3>Available classes</h3>
|
||
|
||
<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
|
||
|
||
<table class="table table-bordered table-striped responsive-utilities">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>
|
||
Extra small devices
|
||
<small>Phones (<768px)</small>
|
||
</th>
|
||
<th>
|
||
Small devices
|
||
<small>Tablets (≥768px)</small>
|
||
</th>
|
||
<th>
|
||
Medium devices
|
||
<small>Desktops (≥992px)</small>
|
||
</th>
|
||
<th>
|
||
Large devices
|
||
<small>Desktops (≥1200px)</small>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th><code>.visible-xs</code></th>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.visible-sm</code></th>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.visible-md</code></th>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.visible-lg</code></th>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<th><code>.hidden-xs</code></th>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.hidden-sm</code></th>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.hidden-md</code></th>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
<td class="is-visible">Visible</td>
|
||
</tr>
|
||
<tr>
|
||
<th><code>.hidden-lg</code></th>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-visible">Visible</td>
|
||
<td class="is-hidden">Hidden</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<!-- END MAIN CONTENT -->
|
||
|
||
</div>
|
||
<!-- END MAIN PANEL -->
|
||
<!-- ==========================CONTENT ENDS HERE ========================== -->
|
||
|
||
<?php
|
||
// include page footer
|
||
include("inc/footer.php");
|
||
?>
|
||
|
||
<?php
|
||
//include required scripts
|
||
include("inc/scripts.php");
|
||
?>
|
||
|
||
<!-- PAGE RELATED PLUGIN(S)
|
||
<script src="..."></script>-->
|
||
|
||
<script>
|
||
|
||
$(document).ready(function() {
|
||
// PAGE RELATED SCRIPTS
|
||
})
|
||
|
||
</script>
|
||
|
||
<?php
|
||
//include footer
|
||
include("inc/google-analytics.php");
|
||
?>
|