Browse Source

Chapter 2

Frederic G. MARAND 9 năm trước cách đây
mục cha
commit
71473479ba
5 tập tin đã thay đổi với 270 bổ sung0 xóa
  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

@@ -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

@@ -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

@@ -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

@@ -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

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