Design website interface with bootstrap

Design website interface with bootstrap

Hello everyone back. Today I will share with you how to create a beautiful, fast html blog interface thanks to a named . Here I will not say much about Bootstraps anymore. It is simply a combination of css and js that provide formatting attributes for html that we don’t need to write manually. Now let’s start.

First download Bootstraps from http://getbootstrap.com/ then extract you will get folders like css, js, fonts.

Outline interface layout

In this article, I will design a homepage of the news website. Other pages you can design similar.

Phát thảo giao diện trang chủ

Outline the home page interface

According to the interface above you will have to design a lot of divs and will definitely have to css for the size of each suitable div like draft. However, when using bootstraps, you won’t have to do anything but select the appropriate classes.

Install bootstrap and create div frames

In the decompressed folder of bootstraps, create a file called “index.html”, then code this structure first. If you have learned through html, this is simple.

Install bootstrap

<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="js/bootstrap.min.js" defer=""></script>
 </head>
 
 
 <body>
 
 </body>
</html>

In the head tag you need to import into the css and js library of bootstraps, and you should import jquery so that some functions in bootstraps.min.js do not generate errors and can be used properly.

Create a div frame according to the outline

In the draft, we will create such divs and below is the code I have developed, In here the comments have already been annotated, you can review each pair to see accordingly.

<html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="js/bootstrap.min.js" defer=""></script>
 </head>
 
 
 <body>
 
 <div> <!--The whole package-->
 
   <div> <!--section containing logo and menu-->
     <div> <!--section containing logo-->
     </div>
     
     <div> <!--section containing menu-->
     </div>
   </div>
 
   <div> <!--section containing banner-->
   </div>
 
   <div> <!--section containing content-->
     <div> <!--section containing items-->
     </div>
     <div> <!--section containing paging-->
     </div>
     <div> <!--section containing banner ads-->
     </div>
   </div>
 
   <div> <!--section containing sidebar-->
   </div>
 
   <div> <!--section containing footer-->
   </div>
 
  </div>
 
 </body>
</html>

You should keep your position accordingly. Their order on html is also the order of location on the phone screen.

Select the appropriate classes for each div

Now we will learn about the classes of bootstraps and choose the classes that best suit the div to create an interface like that.

The whole package

Listening to the section name you can also know it will cover the entire site. And in this div, I have 2 classes to choose it as “.container” and “.containe-fluid” with the container class. You will get 2 space on both sides and containe-fluid, then full screen. However, all kinds of small screens like mobile devices are all full.

And certainly with the design on the outline, we will use the container layer offline. and the code is as follows.

<div class="container"> <!--The whole package-->

Section containing logo and menu

We see this section is almost the width of the div containing it, so we will use a common class in the bootstraps that is “.row”. Listening to the name you can also know how this class is formatted. However, you should remember that the row class is not 100% full width of the div containing it. It is left-margin and right-margin is -15px, which is beyond its containing 15px div. You add this class as follows.

<div class="row"> <!--section containing logo and menu-->

Section containing menu

Same on a div containing a class is row, if the total size of the two horizontal sections does not exceed the row, it will be on a row.

Perhaps you should consult this section at: https://v4-alpha.getbootstrap.com/layout/grid/ to get a better understanding. However, if you just need to make a website just enough, you can read on.

In the bootstraps, the row is defined as a row, then col is defined as a column. However, at the bootstraps, it is divided into 12 columns, it will be attached to col to create such a class. But Bootstraps also attaches these col to the size of the screen, and they divide it into 5 different types of screen sizes. 5 types of screens are in turn:

  • Tiny screen: Size: <576px, symbol: No.
  • Small screen: Size: ≥576px đến <768px, symbol: sm.
  • Medium screen: Size: ≥768px đến <992px, symbol: md.
  • Large screen: Size: ≥992px đến <1200px, symbol: lg.
  • Extra large screen: Size: ≥1200px, symbol: xl.

The formula for these bootstrap columns is: col- {screen symbol}-{column number}

When col carries any symbols, it will be applied when the screen is in the size of the symbol.

For example, I want to display the div width with 3 columns in the small screen and 6 columns in the big screen, the code is as follows:

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

However, the above applies only to designs with complex boxes and requires different flexible divs in different screen sizes. With a simple request like your tuandc.com website, you only need to select one to 2 symbols to be fine. Here I will use md.

 <div class="row"> <!--section containing logo and menu-->
    <div class="col-md-3"> <!--section containing logo-->
    </div>
 
    <div class="col-md-9"> <!--section containing menu-->
    </div>
 </div>

Why 3 and 9. You can customize these 2 numbers accordingly but its total must be 12, because 1 row contains 12 col as above I said. Exceeding the number of 12 your interface will be broken and overflowed.

Complete the rest

<div class="container"> <!--The whole package-->

  <div class="row"> <!--phần chứa logo và menu-->
    <div class="col-md-3"> <!--section containing logo-->
    </div>
 
    <div class="col-md-9"> <!--section containing menu-->
    </div>
  </div>
 
  <div class="row"> <!--section containing banner-->
 
  </div>
 
  <div class="col-md-8"> <!--section containing content-->
     <div class="col-md-6"> <!--section containing items-->
     </div>
  
     <div class="col-md-12 "> <!--section containing paging-->
     </div>
 
     <div class="col-md-12"> <!--section containing banner ads-->
     </div>
  </div>
 
  <div class="col-md-4"> <!--section containing sidebar-->
  </div>
 
  <div class="row"> <!--section containing footer-->
  </div>
 
 </div>

So we have designed the “skeleton” for the website. Now we will create images of logos and menus.

Create logo and Responsive Menu for website in bootstrap.

Create a folder called “img” that loads with folders like css, js then find a nice logo and leave it here and add the code to the logo like this.

 <div class="col-md-3"> <!--part for logo-->
    <img src="img/logo.png" width="100%">
 </div>

Now you will get a logo in the left corner of the screen. This logo I want to width = 100% is to want it to always be full width of the div containing it. If it is too big on the mobile screen size, then add class col-sm-3 to the containing div and the center again if you like.

Next, create a Responsive Menu with the code below

 <div class="col-md-9"> <!--part for menu-->
 
   <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
    </div>

    <div class="collapse navbar-collapse" id="collapse">
       <ul class="nav navbar-nav navbar-left">
         <li class="active"><a href="#">Home Page</a></li>
         <li><a href="#">Trang 1</a></li>
         <li><a href="#">Trang 2</a></li>
         <li><a href="#">Trang 3</a></li>
         <li><a href="#">Trang 4</a></li>
       </ul>
    </div>
  </nav>
 
 </div>

So I have a complete Responsive Menu that can create a collapse menu when the screen size is smaller.

I just wrote here because it was so long, and all the information above will help you to create a standard html page for me to use for writing code later. Other information you can research on the website http://getbootstrap.com. Follow your php programming series to be able to apply a better bootstraps theme.

Bài liên quan
Lượt xem