<html style="height: 100%">
<head>
<meta charset="UTF-8" />
<title>Twig Page</title>
<link rel="stylesheet" href="/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/bootstrap/3.3.4/js/bootstrap.min.js" ></script>
<style>
div.row > div
{
border : 1px solid black;
color : blue;
}
div.row > div:nth-child(2n+1)
{
background-color : #FFCCCC;
}
</style>
<script>
$ ( document ).ready ( function ( ) {
$ ( '.dropdown-toggle' ).dropdown ( );
} );
</script>
</head>
<body style="min-height: 100%">
<div class="container">
<div class="col-md-12">
<div class="page-header">
PC(WIDE)
</div>
<div class="row">
<div class="col-lg-12">
col-lg-12
</div>
<div class="col-lg-1">
col-lg-1
</div>
<div class="col-lg-11">
col-lg-11
</div>
<div class="col-lg-2">
col-lg-2
</div>
<div class="col-lg-10">
col-lg-10
</div>
<div class="col-lg-3">
col-lg-3
</div>
<div class="col-lg-9">
col-lg-9
</div>
<div class="col-lg-4">
col-lg-4
</div>
<div class="col-lg-8">
col-lg-8
</div>
<div class="col-lg-5">
col-lg-5
</div>
<div class="col-lg-7">
col-lg-7
</div>
<div class="col-lg-6">
col-lg-6
</div>
<div class="col-lg-6">
col-lg-6
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
PC
</div>
<div class="row">
<div class="col-md-12">
col-md-12
</div>
<div class="col-md-1">
col-md-1
</div>
<div class="col-md-11">
col-md-11
</div>
<div class="col-md-2">
col-md-2
</div>
<div class="col-md-10">
col-md-10
</div>
<div class="col-md-3">
col-md-3
</div>
<div class="col-md-9">
col-md-9
</div>
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-8">
col-md-8
</div>
<div class="col-md-5">
col-md-5
</div>
<div class="col-md-7">
col-md-7
</div>
<div class="col-md-6">
col-md-6
</div>
<div class="col-md-6">
col-md-6
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Tablet
</div>
<div class="row">
<div class="col-sm-12">
col-sm-12
</div>
<div class="col-sm-1">
col-sm-1
</div>
<div class="col-sm-11">
col-sm-11
</div>
<div class="col-sm-2">
col-sm-2
</div>
<div class="col-sm-10">
col-sm-10
</div>
<div class="col-sm-3">
col-sm-3
</div>
<div class="col-sm-9">
col-sm-9
</div>
<div class="col-sm-4">
col-sm-4
</div>
<div class="col-sm-8">
col-sm-8
</div>
<div class="col-sm-5">
col-sm-5
</div>
<div class="col-sm-7">
col-sm-7
</div>
<div class="col-sm-6">
col-sm-6
</div>
<div class="col-sm-6">
col-sm-6
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
SmartPhone
</div>
<div class="row">
<div class="col-xs-12">
col-xs-12
</div>
<div class="col-xs-1">
col-xs-1
</div>
<div class="col-xs-11">
col-xs-11
</div>
<div class="col-xs-2">
col-xs-2
</div>
<div class="col-xs-10">
col-xs-10
</div>
<div class="col-xs-3">
col-xs-3
</div>
<div class="col-xs-9">
col-xs-9
</div>
<div class="col-xs-4">
col-xs-4
</div>
<div class="col-xs-8">
col-xs-8
</div>
<div class="col-xs-5">
col-xs-5
</div>
<div class="col-xs-7">
col-xs-7
</div>
<div class="col-xs-6">
col-xs-6
</div>
<div class="col-xs-6">
col-xs-6
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
PC 6 COL / Tab 4 / SPhone 3 COL
</div>
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6">
col-lg-1 col-md-2 col-sm-4 col-xs-6
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
PC OFFSET
</div>
<div class="row">
<div class="col-md-offset-11 col-md-1">
col-md-offset-11 col-md-1
</div>
<div class="col-md-offset-10 col-md-2">
col-md-offset-10 col-md-2
</div>
<div class="col-md-offset-9 col-md-3">
col-md-offset-9 col-md-3
</div>
<div class="col-md-offset-8 col-md-4">
col-md-offset-8 col-md-4
</div>
<div class="col-md-offset-7 col-md-5">
col-md-offset-7 col-md-5
</div>
<div class="col-md-offset-6 col-md-6">
col-md-offset-6 col-md-6
</div>
<div class="col-md-offset-5 col-md-7">
col-md-offset-5 col-md-7
</div>
<div class="col-md-offset-4 col-md-8">
col-md-offset-4 col-md-8
</div>
<div class="col-md-offset-3 col-md-9">
col-md-offset-3 col-md-9
</div>
<div class="col-md-offset-2 col-md-10">
col-md-offset-2 col-md-10
</div>
<div class="col-md-offset-1 col-md-11">
col-md-offset-1 col-md-11
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Large
</div>
<div>
<a href="#" class="btn btn-default btn-lg" >Button Default</a>
<a href="#" class="btn btn-primary btn-lg" >Button Primary</a>
<a href="#" class="btn btn-info btn-lg" >Button Info</a>
<a href="#" class="btn btn-success btn-lg" >Button Success</a>
<a href="#" class="btn btn-warning btn-lg" >Button Warning</a>
<a href="#" class="btn btn-danger btn-lg" >Button Danger</a>
<a href="#" class="btn btn-link btn-lg" >Button Link</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button
</div>
<div>
<a href="#" class="btn btn-default" >Button Default</a>
<a href="#" class="btn btn-primary" >Button Primary</a>
<a href="#" class="btn btn-info" >Button Info</a>
<a href="#" class="btn btn-success" >Button Success</a>
<a href="#" class="btn btn-warning" >Button Warning</a>
<a href="#" class="btn btn-danger" >Button Danger</a>
<a href="#" class="btn btn-link" >Button Link</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Small
</div>
<div>
<a href="#" class="btn btn-default btn-sm" >Button Default</a>
<a href="#" class="btn btn-primary btn-sm" >Button Primary</a>
<a href="#" class="btn btn-info btn-sm" >Button Info</a>
<a href="#" class="btn btn-success btn-sm" >Button Success</a>
<a href="#" class="btn btn-warning btn-sm" >Button Warning</a>
<a href="#" class="btn btn-danger btn-sm" >Button Danger</a>
<a href="#" class="btn btn-link btn-sm" >Button Link</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button XSmall
</div>
<div>
<a href="#" class="btn btn-default btn-xs" >Button Default</a>
<a href="#" class="btn btn-primary btn-xs" >Button Primary</a>
<a href="#" class="btn btn-info btn-xs" >Button Info</a>
<a href="#" class="btn btn-success btn-xs" >Button Success</a>
<a href="#" class="btn btn-warning btn-xs" >Button Warning</a>
<a href="#" class="btn btn-danger btn-xs" >Button Danger</a>
<a href="#" class="btn btn-link btn-xs" >Button Link</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Block
</div>
<div>
<div class="col-md-2">
<a href="#" class="btn btn-default btn-block" >Button Default</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-primary btn-block" >Button Primary</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-info btn-block" >Button Info</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-success btn-block" >Button Success</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-warning btn-block" >Button Warning</a>
</div>
<div class="col-md-2">
<a href="#" class="btn btn-danger btn-block" >Button Danger</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Active
</div>
<div>
<a href="#" class="btn btn-default active" >Button Default</a>
<a href="#" class="btn btn-primary active" >Button Primary</a>
<a href="#" class="btn btn-info active" >Button Info</a>
<a href="#" class="btn btn-success active" >Button Success</a>
<a href="#" class="btn btn-warning active" >Button Warning</a>
<a href="#" class="btn btn-danger active" >Button Danger</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Disabled
</div>
<div>
<a href="#" class="btn btn-default disabled" >Button Default</a>
<a href="#" class="btn btn-primary disabled" >Button Primary</a>
<a href="#" class="btn btn-info disabled" >Button Info</a>
<a href="#" class="btn btn-success disabled" >Button Success</a>
<a href="#" class="btn btn-warning disabled" >Button Warning</a>
<a href="#" class="btn btn-danger disabled" >Button Danger</a>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Group Large
</div>
<div>
<div class="btn-group btn-group-lg">
<a href="#" class="btn btn-default " >Button Default</a>
<a href="#" class="btn btn-primary " >Button Primary</a>
<a href="#" class="btn btn-info " >Button Info</a>
<a href="#" class="btn btn-success " >Button Success</a>
<a href="#" class="btn btn-warning " >Button Warning</a>
<a href="#" class="btn btn-danger " >Button Danger</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Group
</div>
<div>
<div class="btn-group">
<a href="#" class="btn btn-default " >Button Default</a>
<a href="#" class="btn btn-primary " >Button Primary</a>
<a href="#" class="btn btn-info " >Button Info</a>
<a href="#" class="btn btn-success " >Button Success</a>
<a href="#" class="btn btn-warning " >Button Warning</a>
<a href="#" class="btn btn-danger " >Button Danger</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Group Small
</div>
<div>
<div class="btn-group btn-group-sm">
<a href="#" class="btn btn-default " >Button Default</a>
<a href="#" class="btn btn-primary " >Button Primary</a>
<a href="#" class="btn btn-info " >Button Info</a>
<a href="#" class="btn btn-success " >Button Success</a>
<a href="#" class="btn btn-warning " >Button Warning</a>
<a href="#" class="btn btn-danger " >Button Danger</a>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Group XSmall
</div>
<div>
<div class="btn-group btn-group-xs">
<a href="#" class="btn btn-default " >Button Default</a>
<a href="#" class="btn btn-primary " >Button Primary</a>
<a href="#" class="btn btn-info " >Button Info</a>
<a href="#" class="btn btn-success " >Button Success</a>
<a href="#" class="btn btn-warning " >Button Warning</a>
<a href="#" class="btn btn-danger " >Button Danger</a>
</div>
</div>
<div class="page-header">
Button Toolbar
</div>
<div>
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn btn-default " >Button Default</a>
<a href="#" class="btn btn-primary " >Button Primary</a>
<a href="#" class="btn btn-info " >Button Info</a>
</div>
<div class="btn-group">
<a href="#" class="btn btn-success " >Button Success</a>
<a href="#" class="btn btn-warning " >Button Warning</a>
<a href="#" class="btn btn-danger " >Button Danger</a>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Group Dropdown
</div>
<div>
<div class="btn-group">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button">
<span>Default Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button">
<span>Primary Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button">
<span>Info Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button">
<span>Success Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button">
<span>Warning Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button">
<span>Danger Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Button Dropdown
</div>
<div>
<div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" type="button">
<span>Default Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button">
<span>Primary Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button">
<span>Info Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button">
<span>Success Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button">
<span>Warning Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button">
<span>Danger Dropdown</span><span class="caret">
</span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">Item 1</a></li>
<li><a href="javascript:void(0);">Item 2</a></li>
<li><a href="javascript:void(0);">Item 3</a></li>
<li><a href="javascript:void(0);">Item 4</a></li>
<li><a href="javascript:void(0);">Item 5</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Text Color
</div>
<div>
<p class="text-muted">
Text Muted
</p>
<p class="text-primary">
Text Primary
</p>
<p class="text-success">
Text Success
</p>
<p class="text-info">
Text Info
</p>
<p class="text-warning">
Text Warning
</p>
<p class="text-danger">
Text Danger
</p>
</div>
</div>
<div class="col-md-12">
<div class="page-header">
Background Color
</div>
<div>
<p class="bg-primary">
Text Primary
</p>
<p class="bg-success">
Text Success
</p>
<p class="bg-info">
Text Info
</p>
<p class="bg-warning">
Text Warning
</p>
<p class="bg-danger">
Text Danger
</p>
</div>
</div>
<div class="col-md-12"></div>
</div>
</body>
</html>