Home Explore Help
Sign In
fgm
/
js__bootstrap_demos
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Chapter 3

Frederic G. MARAND 10 years ago
parent
d48562e436
commit
aa5ede4106
13 changed files with 729 additions and 0 deletions
Unified View Show Diff Stats
  1. 29 0
      chapter3/01header.html
  2. 75 0
      chapter3/02media.html
  3. 54 0
      chapter3/03thumbnail.html
  4. 54 0
      chapter3/04listgroup.html
  5. 56 0
      chapter3/05nav.html
  6. 64 0
      chapter3/06navbar.html
  7. 34 0
      chapter3/07breadcrumbs.html
  8. 80 0
      chapter3/08labels-buttons.html
  9. 87 0
      chapter3/09glyphicons-badges.html
  10. 54 0
      chapter3/10form.html
  11. 65 0
      chapter3/11form-horizontal.html
  12. 54 0
      chapter3/12form-inline.html
  13. 23 0
      chapter3/styles.css

+ 29 - 0
chapter3/01header.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components</small>
 
+    </h1>
 
+  </div>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 75 - 0
chapter3/02media.html
View File 

@@ -0,0 +1,75 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components</small>
 
+    </h1>
 
+    <div class="panel panel-default">
 
+      <div class="panel-heading">ATTENTION</div>
 
+      <div class="panel-body">Lorem ipsum sic amet.</div>
 
+      <div class="panel-footer">
 
+        <a href="#" class="btn btn-danger btn-sm">Agree</a>
 
+        <a href="#" class="btn btn-default btn-sm">Decline</a>
 
+      </div>
 
+    </div>
 
+    <div class="row">
 
+      <div class="col col-lg-3 panel panel-primary">Primary</div>
 
+      <div class="col col-lg-3 panel panel-success">Success</div>
 
+      <div class="col col-lg-3 panel panel-info">Info</div>
 
+      <div class="col col-lg-3 panel panel-warning">Warning</div>
 
+    </div>
 
+
 
+    <div class="row">
 
+      <div class="media">
 
+        <a href="#" class="pull-left">
 
+          <img class="media-object" src="../images/logo-osinet.png" alt="a logo" width="50" />
 
+        </a>
 
+        <div class="media-body">
 
+          <h4 class="media-heading">Awesome piece of work!</h4>
 
+          <p>Lorem ipsum sic amet, consectetur...</p>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="row">
 
+      <div class="media">
 
+        <a href="#" class="pull-left">
 
+          <img class="media-object" src="../images/logo-osinet.png" alt="a logo" width="50" />
 
+        </a>
 
+        <div class="media-body">
 
+          <h4 class="media-heading">Awesome piece of work!</h4>
 
+          <p>Lorem ipsum sic amet, consectetur...</p>
 
+          <div class="media">
 
+            <a href="#" class="pull-left">
 
+              <img class="media-object" src="../images/logo-osinet.png" alt="a logo" width="50" />
 
+            </a>
 
+            <div class="media-body">
 
+              <h4 class="media-heading">Awesome piece of work!</h4>
 
+              <p>Lorem ipsum sic amet, consectetur...</p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 54 - 0
chapter3/03thumbnail.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <div class="row">
 
+    <div class="col-xs-3">
 
+      <a href="#" class="thumbnail"><img src="../images/logo-osinet.png" />
 
+      <div class="caption">Caption 1</div></a>
 
+    </div>
 
+    <div class="col-xs-3">
 
+      <a href="#" class="thumbnail"><img src="../images/logo-osinet.png" />
 
+      <div class="caption">Caption 2</div></a>
 
+    </div>
 
+    <div class="col-xs-3">
 
+      <a href="#" class="thumbnail"><img src="../images/logo-osinet.png" />
 
+      <div class="caption">Caption 3</div></a>
 
+    </div>
 
+    <div class="col-xs-3">
 
+      <div class="thumbnail">
 
+        <img src="../images/logo-osinet.png" />
 
+        <div class="caption">
 
+          <h3>Caption 4</h3>
 
+          <p>Lorem ipsum sic amet, consectetur...</p>
 
+          <p><a href="#" class="btn btn-primary">Read more</a></p>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 54 - 0
chapter3/04listgroup.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap list groups</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <ul class="list-group">
 
+    <li class="list-group-item">Plain item<span class="badge">1</span></li>
 
+    <li class="list-group-item list-group-item-success">Success<span class="badge">2</span></li>
 
+    <li class="list-group-item list-group-item-info">Info<span class="badge">4</span></li>
 
+    <li class="list-group-item list-group-item-warning">Warning<span class="badge">8</span></li>
 
+    <li class="list-group-item list-group-item-danger">Danger<span class="badge">16</span></li>
 
+  </ul>
 
+
 
+  <div class="list-group">
 
+    <a href="#" class="list-group-item">
 
+      <span class="badge">32</span>
 
+      <h4 class="list-group-item-heading">Heading</h4>
 
+      <span class="badge">64</span>
 
+      <p class="list-group-item-text">Lorem ipsum sic amet, consectetur...</p>
 
+    </a>
 
+  </div>
 
+
 
+  <ul class="list-group">
 
+    <li class="list-group-item">Plain item<span class="badge">128</span></li>
 
+    <li class="list-group-item active">Plain item<span class="badge">256</span></li>
 
+    <li class="list-group-item">Plain item<span class="badge">512</span></li>
 
+    <li class="list-group-item">Plain item<span class="badge">1024</span></li>
 
+  </ul>
 
+</div>
 
+
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 56 - 0
chapter3/05nav.html
View File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap nav</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css" />
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: navigation</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <h3 class="panel-heading">Tabs</h3>
 
+    <ul class="nav nav-tabs">
 
+      <li class="active"><a href="#">About</a></li>
 
+      <li><a href="#">Activity</a></li>
 
+      <li><a href="#">Liked pages</a></li>
 
+    </ul>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <h3 class="panel-heading">Pills</h3>
 
+    <ul class="nav nav-pills">
 
+      <li class="active"><a href="#">About</a></li>
 
+      <li><a href="#">Activity</a></li>
 
+      <li><a href="#">Liked pages</a></li>
 
+    </ul>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <h3 class="panel-heading">Stacked Pills</h3>
 
+    <ul class="nav nav-pills nav-stacked">
 
+      <li class="active"><a href="#">About</a></li>
 
+      <li><a href="#">Activity</a></li>
 
+      <li><a href="#">Liked pages</a></li>
 
+    </ul>
 
+  </div>
 
+</div>
 
+
 
+
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 64 - 0
chapter3/06navbar.html
View File 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap nav</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: navigation bar</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <div class="navbar navbar-default">
 
+    <div class="container-fluid">
 
+      <div class="navbar-header">
 
+        <button class="navbar-toggle" data-toggle="collapse" data-target="#mynavbarcontent">
 
+        <span class="icon-bar"></span>
 
+        <span class="icon-bar"></span>
 
+        <span class="icon-bar"></span>
 
+        </button>
 
+        <a href="#" class="navbar-brand">Sitepoint</a>
 
+      </div>
 
+
 
+      <div class="navbar-collapse collapse" id="mynavbarcontent">
 
+        <ul class="nav navbar-nav">
 
+          <li class="dropdown">
 
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
+              About
 
+              <b class="caret"></b>
 
+            </a>
 
+            <ul class="dropdown-menu">
 
+              <li><a href="#">Board of members</a></li>
 
+              <li><a href="#">Developers team</a></li>
 
+              <li><a href="#">Designing team</a></li>
 
+              <li class="divider"></li>
 
+              <li><a href="#">Investors</a></li>
 
+              <li><a href="#">Shareholders</a></li>
 
+            </ul>
 
+          </li>
 
+          <li><a href="#">Pricing</a></li>
 
+          <li><a href="#">Contact</a></li>
 
+          <li><a href="#">Feedback</a></li>
 
+        </ul>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+</div>
 
+
 
+
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 34 - 0
chapter3/07breadcrumbs.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap nav</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: breadcrumbs</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <ol class="breadcrumb">
 
+    <li><a href="#">Home</a></li>
 
+    <li><a href="#">About</a></li>
 
+    <li class="active">Author</li>
 
+  </ol>
 
+</div>
 
+
 
+
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 80 - 0
chapter3/08labels-buttons.html
View File 

@@ -0,0 +1,80 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <h3>Jump start Bootstrap: labels
 
+    <span class="label label-default">Default</span>
 
+    <span class="label label-primary">Primary</span>
 
+    <span class="label label-info">Info</span>
 
+    <span class="label label-success">Success</span>
 
+    <span class="label label-warning">Warning</span>
 
+    <span class="label label-danger">Danger</span>
 
+  </h3>
 
+
 
+  <div class="panel">
 
+    <div class="panel-heading">
 
+      <h3>Jump start Bootstrap: buttons / large</h3>
 
+    </div>
 
+    <div class="panel-body">
 
+      <button type="button" class="btn btn-lg btn-default active">Default active</button>
 
+      <button type="button" class="btn btn-lg btn-default">Default</button>
 
+      <button type="button" class="btn btn-lg btn-primary">Primary</button>
 
+      <button type="button" class="btn btn-lg btn-info">Info</button>
 
+      <button type="button" class="btn btn-lg btn-info disabled">Info disabled</button>
 
+      <button type="button" class="btn btn-lg btn-success btn-block">Success block</button>
 
+      <button type="button" class="btn btn-lg btn-warning">Warning</button>
 
+      <button type="button" class="btn btn-lg btn-danger">Danger</button>
 
+    </div>
 
+
 
+    <div class="panel-heading">
 
+      <h3>Jump start Bootstrap: buttons / small</h3>
 
+    </div>
 
+    <div class="panel-body">
 
+      <button type="button" class="btn btn-sm btn-default">Default</button>
 
+      <button type="button" class="btn btn-sm btn-primary active">Primary active</button>
 
+      <button type="button" class="btn btn-sm btn-primary">Primary</button>
 
+      <button type="button" class="btn btn-sm btn-info">Info</button>
 
+      <button type="button" class="btn btn-sm btn-success">Success</button>
 
+      <button type="button" class="btn btn-sm btn-warning btn-block">Warning block</button>
 
+      <button type="button" class="btn btn-sm btn-danger">Danger</button>
 
+    </div>
 
+
 
+    <div class="panel-heading">
 
+      <h3>Jump start Bootstrap: buttons / extra-small</h3>
 
+    </div>
 
+    <div class="panel-body">
 
+      <button type="button" class="btn btn-xs btn-default">Default</button>
 
+      <button type="button" class="btn btn-xs btn-primary">Primary</button>
 
+      <button type="button" class="btn btn-xs btn-info active">Info active</button>
 
+      <button type="button" class="btn btn-xs btn-info">Info</button>
 
+      <button type="button" class="btn btn-xs btn-success">Success</button>
 
+      <button type="button" class="btn btn-xs btn-warning">Warning</button>
 
+      <button type="button" class="btn btn-xs btn-danger btn-block">Danger block</button>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 87 - 0
chapter3/09glyphicons-badges.html
View File 

@@ -0,0 +1,87 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: glyphicons, badges, wells</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <div class="row">
 
+      <div class="col-lg-6">
 
+        <div class="panel-heading"><h2>Glyphicons</h2></div>
 
+        <div class="panel-body">
 
+          <p>Cloud: <span class="glyphicon glyphicon-cloud"></span></p>
 
+          <p>Adjust: <span class="glyphicon glyphicon-adjust"></span></p>
 
+          <p>Save: <span class="glyphicon glyphicon-save"></span></p>
 
+          <p>List at <a href="http://getbootstrap.com/components/#glyphicons">http://getbootstrap.com/components/#glyphicons</a></p>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="col-lg-6">
 
+        <div class="panel-heading"><h2>Badges</h2></div>
 
+        <div class="panel-body">
 
+          <p>Plain: <span class="badge">23</span></p>
 
+          <p>Usual:
 
+            <a href="#" class="btn btn-primary btn-lg">
 
+              Inbox
 
+              <span class="badge">23</span>
 
+            </a>
 
+          </p>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  </div>
 
+
 
+  <div class="panel">
 
+    <div class="panel-heading">
 
+      <h2>Wells</h2>
 
+    </div>
 
+    <div class="panel-body">
 
+      <div class="row">
 
+        <div class="col-lg-4 col-md-6 col-sm-12">
 
+          <h3>Large</h3>
 
+          <div class="well well-lg">
 
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-4 col-md-6 col-sm-12">
 
+          <h3>Default</h3>
 
+          <div class="well">
 
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
+          </div>
 
+        </div>
 
+
 
+        <div class="col-lg-4 col-md-6 col-sm-12">
 
+          <h3>Small</h3>
 
+          <div class="well well-sm">
 
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 54 - 0
chapter3/10form.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: form</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <form class="form">
 
+    <div class="form-group">
 
+      <label for="nameField">Name</label>
 
+      <input type="text" class="form-control" id="nameField" placeholder="Your name" />
 
+    </div>
 
+
 
+    <div class="form-group">
 
+      <label for="emailField">E-mail</label>
 
+      <input type="text" class="form-control" id="emailField" placeholder="Your email" />
 
+    </div>
 
+
 
+    <div class="form-group">
 
+      <label for="phoneField">Phone number</label>
 
+      <input type="text" class="form-control" id="phoneField" placeholder="Your phone number" disabled />
 
+    </div>
 
+
 
+    <div class="form-group">
 
+      <label for="descField">Description</label>
 
+      <textarea class="form-control" id="descField" placeholder="Your comments"></textarea>
 
+    </div>
 
+
 
+    <button type="submit" class="btn btn-primary">Submit</button>
 
+    <button type="reset" class="btn btn-default">Reset</button>
 
+  </form>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 65 - 0
chapter3/11form-horizontal.html
View File 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: horizontal form</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <form class="form-horizontal">
 
+    <div class="form-group has-success">
 
+      <label for="nameField" class="col-xs-2">Name</label>
 
+      <div class="col-xs-10">
 
+        <input type="text" class="form-control input-lg" id="nameField" placeholder="Your name" />
 
+      </div>
 
+    </div>
 
+
 
+    <div class="form-group has-warning">
 
+      <label for="emailField" class="col-xs-2">E-mail</label>
 
+      <div class="col-xs-10">
 
+        <input type="text" class="form-control" id="emailField" placeholder="Your email" />
 
+        <span class="help-block">Accepts email addresses in the form foo@bar.tld only</span>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="form-group has-error">
 
+      <label for="phoneField" class="col-xs-2">Phone number</label>
 
+      <div class="col-xs-10">
 
+        <input type="text" class="form-control" id="phoneField" placeholder="Your phone number" />
 
+      </div>
 
+    </div>
 
+
 
+    <div class="form-group">
 
+      <label for="descField" class="col-xs-2">Description</label>
 
+      <div class="col-xs-10">
 
+        <textarea class="form-control input-sm" id="descField" placeholder="Your comments"></textarea>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="col-xs-10 col-xs-offset-2">
 
+      <button type="submit" class="btn btn-primary">Submit</button>
 
+      <button type="reset" class="btn btn-default">Reset</button>
 
+    </div>
 
+  </form>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 54 - 0
chapter3/12form-inline.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>Bootstrap grid system</title>
 
+  <meta charset="utf-8"/>
 
+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
 
+  <link rel="stylesheet" href="styles.css" />
 
+  <!--[if lt IE 9]>
 
+  <script src="../js/html5shiv.3-7-0.js"></script>
 
+  <script src="../js/respond.1-4-2.min.js"></script>
 
+  <![endif]-->
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="page-header">
 
+    <h1>Chapter 3
 
+      <small>Exploring Bootstrap components: inline form</small>
 
+    </h1>
 
+  </div>
 
+
 
+  <form class="form-inline">
 
+    <div class="form-group">
 
+      <input type="text" class="form-control" id="emailField" placeholder="Enter email" />
 
+    </div>
 
+
 
+    <div class="form-group">
 
+      <input type="password" class="form-control" id="passwordField" placeholder="Password" />
 
+    </div>
 
+
 
+    <div class="checkbox">
 
+      <label>
 
+        <input type="checkbox" />Remember me
 
+      </label>
 
+    </div>
 
+
 
+    <div class="radio">
 
+      <label>
 
+        <input name="gender" type="radio" value="Male" />Male
 
+        <input name="gender" type="radio" value="Female" />Female
 
+      </label>
 
+    </div>
 
+
 
+    <button type="submit" class="btn btn-primary">Sign in</button>
 
+  </form>
 
+</div>
 
+
 
+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
 
+<script src="../js/jquery-1.11.2.min.js"></script>
 
+<script src="../js/bootstrap.js"></script>
 
+</body>
 
+</html>

+ 23 - 0
chapter3/styles.css
View File 

@@ -0,0 +1,23 @@
 
+.container {
 
+  background-color: #fcfcff;
 
+}
 
+
 
+  .col1 {
 
+  background: #8Ca0b0;
 
+}
 
+
 
+.col2 {
 
+  background: #6BC0FF;
 
+}
 
+
 
+.col3 {
 
+  background: #e8aa4c;
 
+}
 
+
 
+.col4 {
 
+  background: #ff384e;
 
+}
 
+
 
+.col5 {
 
+  background: #8fff74;
 
+}