Teach Yourself Bootstrap Part 1 Code Listings

Part 1: Getting Started with Bootstrap

Sams Teach Yourself Bootstrap in 24 Hours

Hour 1: What is a Framework and Why You Should Use It

Listing 1.1

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic Grid System</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
  .show-grid [class^=col-] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86,61,124,.2);
  }
  </style>
</head>

<body>

  <div class="container">
  <h1>Basic Grid System</h1>
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-3">.col-md-3</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-5">.col-md-5</div>
      <div class="col-md-5">.col-md-5</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-7">.col-md-7</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-9">.col-md-9</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-10">.col-md-10</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-11">.col-md-11</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-12">.col-md-12</div>
    </div>
  </div>

</body>
</html>

Hour 2: Downloading and Installing Bootstrap

Listing 2.1

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Listing 2.2

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Listing 2.3

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Hour 3: Build Your First Bootstrap Website with the Basic Template

Listing 3.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Listing 3.2

<link href="css/bootstrap.min.css" rel="stylesheet">

Listing 3.3

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>

Listing 3.4

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
    media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via
    file:// -->
    <!--[if lt IE 9]>
      <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual
    files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Listing 3.5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Starter Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and
    media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via
    file:// -->
    <!--[if lt IE 9]>
      <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any
        new project.<br> All you get is this text and a mostly barebones
        HTML document.</p>
      </div>
    </div><!-- /.container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <!-- Include all compiled plugins (below), or include individual
    files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Hour 4: Understanding Normalize.CSS and the Basics of Bootstrap CSS

Listing 4.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>A Basic Bootstrap page</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <h1>A Basic Bootstrap Page</h1>
  <p>
  Lorem <a href="#">ipsum dolor sit</a> amet, consectetur adipiscing elit. Donec ut elit sed turpis sodales mattis. Pellentesque ex ipsum, pretium eu turpis non, interdum laoreet lacus. Praesent faucibus, nisl ac tempor bibendum, felis turpis fringilla tellus, eu tristique risus magna sit amet velit. Suspendisse eget libero ut purus egestas tempor quis et arcu. </p>
  <p>
  Etiam mollis tortor eget arcu sodales, nec commodo <a href="#">tellus feugiat</a>. Fusce ornare sed mauris at efficitur. Sed in tortor eu diam elementum ultrices. Quisque euismod pharetra metus sit amet sollicitudin. Fusce sollicitudin velit lorem, non condimentum justo congue id. </p>
  <ul>
    <li><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit.</li>
    <li>Duis tristique augue ac turpis vulputate interdum.</li>
    <li>Maecenas bibendum mauris tincidunt, aliquet metus ut, pellentesque neque.</li>
  </ul>
  <dl>
    <dt>Proin <a href="#">placerat</a> ligula ut commodo volutpat.</dt>
    <dd>Proin sed tortor eget enim maximus efficitur vitae porta purus.</dd>
    <dt>Phasellus placerat ligula ut justo varius, at pretium dolor interdum.</dt>
    <dd>Proin hendrerit augue sed massa pellentesque porttitor.</dd>
  </dl>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Listing 4.2

a:link, a:visited, a:active { 
  text-decoration: underline;
}
body { 
  background-color: #CCF6FA;
  margin-left: 0.5%;
}
ul { 
  padding-left: 0; 
  margin-left: 2%; 
}
dd { 
  text-indent: 3%; 
}