Browse Source

Chapter 5: CSS customization, code/kbd/pre styling.

Frederic G. MARAND 9 years ago
parent
commit
0aaf9f3c1b
2 changed files with 64 additions and 0 deletions
  1. 13 0
      chapter5/1justcss.css
  2. 51 0
      chapter5/1justcss.html

+ 13 - 0
chapter5/1justcss.css

@@ -0,0 +1,13 @@
+body {
+  padding: 1em;
+}
+
+.btn {
+  border-radius: 0;
+  padding: 5px 10px;
+  font-size: 16px;
+}
+
+.btn-primary {
+  background: #63AEF0;
+}

+ 51 - 0
chapter5/1justcss.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Blasting off with Bootstrap</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"/>
+
+  <!-- Add custom CSS *AFTER* bootstrap CSS. -->
+  <link rel="stylesheet" href="1justcss.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="panel panel-default">
+    <div class="panel-heading">
+      <a href="#" class="btn btn-lg btn-primary">Big fat button</a>
+      <a href="#" class="btn btn-lg btn-info pull-right">Pulled right</a>
+    </div>
+  </div>
+
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h3>Code formatting</h3>
+    </div>
+    <div class="panel-body">
+      <pre>
+Some
+  block
+    code</pre>
+
+      <p>Or some <code>inline code</code> or some <kbd>inline user input</kbd>.
+      </p>
+    </div>
+  </div>
+</div>
+
+</button>
+
+<!-- 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>
+</div>
+</body>
+</html>