書名： Advanced TypeScript Programming Projects
作者名： Peter O'Hanlon
本章字?jǐn)?shù)： 803字
更新時(shí)間： 2021-06-24 13:27:07

Creating UIs with Bootstrap

In the remaining chapters, we are going to be doing a lot of work in the browser. Creating an attractive UI can be a difficult thing to do, especially in an era when we may also be targeting mobile devices in different layout modes. In order to make things easier for ourselves, we are going to rely quite heavily on Bootstrap. Bootstrap was designed to be a mobile device first UI framework that smoothly scales up to PC browsers. In this section, we are going to lay out the base template that contains the standard Bootstrap elements, and then have a look at how to lay out a simple page using features such as the Bootstrap grid system.

We are going to start with the starter template from Bootstrap (https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template). With this particular template, we avoid the need to download and install the various CSS stylesheets and JavaScript files; instead, we rely on well-known Content Delivery Networks (CDNs) to source these files for us.

Where possible, I would recommend using CDNs to source external JavaScript and CSS files. This provides many benefits including not needing to maintain these files ourselves and getting the benefit of browser caching when the browser has encountered this CDN file elsewhere.

The starter template looks as follows:

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta name="viewport" content="width=device-width, initial-scale=1, 
      shrink-to-fit=no">
      <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap
      /4.1.3/css/bootstrap.min.css" integrity="sha384-
      MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous">
      <title>
         <
         <Template Bootstrap>
         >
      </title>
   </head>
   <body>
      <!-- 
         Content goes here...
         Start with the container.
         -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin="anonymous"></script>
      <script 
         src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin="anonymous"></script>
   </body>
</html>

The starting point for laying out content is the container. This goes in the preceding content section. The following code shows the div section:

<div class="container">
    
</div>

The container class gives us that familiar Twitter look where it has a fixed size for each screen size. If we need to fill the full window, we can change this to container-fluid.

Inside the container, Bootstrap attempts to lay items out in a grid pattern. Bootstrap operates a system where each row of the screen can be represented as up to 12 discrete columns. By default, these columns are evenly spread out across the page so we can make complicated layouts just by choosing the appropriate number of columns to occupy for each part of our UI. Fortunately for us, Bootstrap provides an extensive set of predefined styles that help us to make layouts for different types of devices, whether they are PCs, mobile phones, or tablets. These styles all follow the same naming convention of .col-<<size-identifier>>-<<number-of-columns>>:

The way that the number of columns works is that each row should ideally add up to 12 columns. So, if we wanted to have a row made of content covering three columns, then six columns, and finally another three columns, we would define our rows to look like this inside our container:

<div class="row">
  <div class="col-sm-3">Hello</div>
  <div class="col-sm-6">Hello</div>
  <div class="col-sm-3">Hello</div>
</div>

That styling defines how this would appear on small devices. It is possible to override the styles for larger devices. For instance, if we wanted large devices to use columns of five, two, and five, we could apply this styling:

<div class="row">
  <div class="col-sm-3 col-lg-5">Hello</div>
  <div class="col-sm-6 col-lg-2">Hello</div>
  <div class="col-sm-3 col-lg-5">Hello</div>
</div>

This is the beauty of a responsive layout system. It allows us to generate content that is appropriate for our devices.

Let's take a look at how to add some content to our page. We are going to add jumbotron to our first column, some text into our second column, and a button in our third column:

<div class="row">
  <div class="col-md-3">
    <div class="jumbotron">
      <h2>
        Hello, world!
      </h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
        eget mi odio. Praesent a neque sed purus sodales interdum. In augue sapien, 
        molestie id lacus eleifend...
      </p>
      <p>
        <a class="btn btn-primary btn-large" href="#">Learn more</a>
      </p>
    </div>
  </div>
  <div class="col-md-6">
    <h2>
      Heading
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
      eget mi odio. Praesent a neque sed purus sodales interdum. In augue sapien, 
      molestie id lacus eleifend...
    </p>
    <p>
      <a class="btn" href="#">View details</a>
    </p>
  </div>
  <div class="col-md-3">
    <button type="button" class="btn btn-primary btn-lg btn-block active">
      Button
    </button>
  </div>
</div>

Again, we are using CSS styling to control what our display looks like. By giving a div section a styling of jumbotron, Bootstrap immediately applies that styling for us. We controlled exactly what our button looks like by choosing to make it the primary button (btn-primary) and so on.

jumbotron normally stretches across the width of all of the columns. We put it inside a three-column div just so we can see that the width and styling is controlled by the grid layout system and that jumbotron does not have some special properties that force it to lay out across the page.

When I want to rapidly prototype a layout, I always follow a two-stage process. The first step is to draw on a piece of paper what I want my UI to look like. I could do this using a wireframe tool but I like the ability to quickly draw things out. Once I have got a general idea of what I want my layout to look like, I use a tool such as Layoutit! ( https://www.layoutit.com/) to put the ideas on to the screen; this also gives me the option to export the layout so that I can further refine it by hand.

官术网_书友最值得收藏!

Advanced TypeScript Programming Projects

Creating UIs with Bootstrap