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

Chapter 2

Frederic G. MARAND 9 years ago
parent
c4b993aaa6
commit
71473479ba
5 changed files with 270 additions and 0 deletions
Split View Show Diff Stats
  1. 47 0
      chapter2/1first.html
  2. 73 0
      chapter2/2blog.html
  3. 54 0
      chapter2/3nested.html
  4. 73 0
      chapter2/4pushpull.html
  5. 23 0
      chapter2/styles.css

+ 47 - 0
chapter2/1first.html
View File 

@@ -0,0 +1,47 @@
 
+<!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.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]-->
 
+  <style type="text/css">
 
+    .container {
 
+      background-color: #fcf8ff;
 
+    }
 
+
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="row">
 
+    <div class="col-xs-12 col-sm-6 col1">
 
+      <h4>Column 1</h4>
 
+    </div>
 
+    <div class="col-xs-12 col-sm-6 col2">
 
+      <h4>Column 2</h4>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="row">
 
+    <div class="col-xs-12 col-sm-6 col3">
 
+      <h4>Column 3</h4>
 
+    </div>
 
+    <div class="col-xs-12 col-sm-6 col4 col-">
 
+      <h4>Column 4</h4>
 
+    </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>

+ 73 - 0
chapter2/2blog.html
View File 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>My first Bootstrap website</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.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]-->
 
+  <style type="text/css">
 
+    .container {
 
+      background-color: #fcf8ff;
 
+    }
 
+
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="col-md-12 text-center">
 
+    <h1>My first Bootstrap blog</h1>
 
+  </div>
 
+  <hr />
 
+  <div class="row">
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 1</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 2</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 3</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 4</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 5</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 6</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+
 
+    </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
chapter2/3nested.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>My first Bootstrap website</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.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="col-md-12 text-center">
 
+    <h1>My first Bootstrap blog</h1>
 
+  </div>
 
+  <hr />
 
+  <div class="row">
 
+    <div class="col-md-6 col1">
 
+      <h3>Column 1</h3>
 
+
 
+      <!--Nesting starts -->
 
+      <div class="row">
 
+        <div class="col-md-6 col3">
 
+          <h3>Column 4</h3>
 
+        </div>
 
+
 
+        <div class="col-md-6 col4">
 
+          <h3>Column 5</h3>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="col-md-6 col2">
 
+      <h3>Column 2</h3>
 
+    </div>
 
+  </div>
 
+
 
+  <div class="row">
 
+    <div class="col-xs-6 col-xs-offset-3 col5">
 
+      Hello Learnable
 
+    </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>

+ 73 - 0
chapter2/4pushpull.html
View File 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <title>My first Bootstrap website</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.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]-->
 
+  <style type="text/css">
 
+    .container {
 
+      background-color: #fcf8ff;
 
+    }
 
+
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+<div class="container">
 
+  <div class="col-md-12 text-center">
 
+    <h1>My first Bootstrap blog</h1>
 
+  </div>
 
+  <hr />
 
+  <div class="row">
 
+    <div class="col-md-9 col-md-push-3">
 
+      <h3>Post Title 1</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-md-3 col-md-pull-9">
 
+      <h3>Post Title 2</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 3</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 4</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 5</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+
 
+    </div>
 
+
 
+    <div class="col-sm-6 col-md-4 col-lg-3">
 
+      <h3>Post Title 6</h3>
 
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 
+        tempor incididunt ut labore et dolore magna aliqua. </p>
 
+
 
+    </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>

+ 23 - 0
chapter2/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;
 
+}