Scribd Logo
Upload

Welcome to Scribd!

  • Modern Design

    Uploaded by

    mansha99
    21 views3 pages
    Modern Design

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Modern Design

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views3 pages

    Modern Design

    Uploaded by

    mansha99
    Modern Design

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    Much has been said and written about Twitter Bootstrap these days in the

    world of web designing and development. Some people call it a boon for web
    developers with zero designing knowledge, while others call it a blessing for
    the designers. Whatever it may be, it does things easier and faster.


    In many scenarios web developers have the entire setup ready with them but
    they cant proceed due to absence of the design of the project they are going
    to work on. They have to rely on the designers to complete the client side of
    their project. This process consumes a hell lot of time and is a serious
    wastage of time for a developer who needs his/her ideas to be implementing
    as quickly as possible. In such scenarios, Twitter Bootstrap comes to the
    rescue in the super-heroic fashion!
    Twitter Bootstrap is a CSS framework that helps in designing web
    applications. It is one of the easiest CSS frameworks to use in the Industry
    today. It assumes you have no designing knowledge and all you want to do is
    write some HTML as per the Bootstrap specifications. In short, Twitter
    Bootstrap has already written a CSS style sheet for you, has inbuilt jQuery
    support and also has some popular JavaScript tools. Wooh! Isnt that great?
    You get a bunch of popular tools ready to use. All you have to do is just place
    the right HTML mark-up at correct place.
    In this tutorial, I will explain how you can start using Twitter Bootstrap by
    showcasing a demo layout page, and how you can explore the framework and
    customize it for your own requirements.

    To start using Twitter Bootstrap, you have to download bootstrap.zip from their official github page. It
    contains a set of files, namely css, js and img that we need to start building websites with Twitter
    Bootstrap. The css folder has style sheet for both non-responsive and responsive designs and also
    their minimized versions. You will use the minimized version for making the site faster when the design
    has been finalized and the project is ready for the launch. The js folder has bootstrap.js and its
    minimized version. These JavaScript files contain various JavaScript components that we will use in our
    website designs. The last folder, img contains two set of Halflings images, both are exactly the same
    except for their foreground color. The halflings images are supplied by glyphicons who were very
    generous enough to provide the images for free in the Twitter Bootstrap project.

    So let us get our hands dirty. Before we start, open your text editor and create the first file named
    index.html and save it in the home folder of your project.

    sitepoint1

    Basic HTML Template for Bootstrap to work

    In order to activate the Bootstrap framework, you need to include all the appropriate files and follow a
    proper HTML structure. Here, we will build the structure first and then see which files are required. The
    first thing that you should note is that it requires an HTML5 doctype declaration at the top:

    <!DOCTYPE html>
    We will set the meta character to utf-8 because we will be using special characters in our project and we
    want the browser to parse them correctly. Twitter Bootstrap also specifies the use of utf-8 in their
    documentations for better compatibility.

    <meta charset=utf-8>

    Then we will set normal html tags like <html>, <head> and <body> which are basic tags of html. Your
    index.html page should look as below.

    Understanding how it works

    Firstly, we need to understand that Twitter Bootstrap is largely dependent on 12 grids. So, what are
    grids?

    Suppose you want two large equal divisions inside the body of your index.html. You have to give a class
    of span6 to each of div element. This tells Bootstrap to make two equal divisions that should span six
    grids on each side. Hopefully, this gives you an idea of how Bootstrap works. It has a set of predefined
    classes for each element. You have to give appropriate classes to each when needed.

    To better understand what we are going to build today, heres the first demo page. Have a look and
    come back. We will start building it.

    Isnt that amazing? Without writing a single piece of CSS, you have such a beautiful marketing area. OK,
    lets explore the above code. The hero-unit has a CSS designed for an h1 tag. So anything you write in
    an h1 heading will look bold and stand out from rest of the body elements. Next we have general <p>
    paragraph tag to describe our marketing or our product.

    Here comes the interesting part, the links and buttons. You can make any link look like a button by
    adding a class btn and then vary its size by adding some more additional classes like btn-large/btn-
    small/btn-mini. To change the colors of the buttons, add classes like btn-success (green), btn-info (light
    blue), btn-warning (yellow) and btn-danger (red). More about buttons and decorating links can be found
    in the Twitter Bootstraps Base CSS section. These classes are applicable to the HTML button element.

    I hope so far your journey has been interesting. Twitter Bootstrap is so easy that it doesnt let you do
    anything inside CSS stylesheets. You have to just use the resources it provides. This is what makes it one
    of the most powerful CSS frameworks in the industry.

    We will now proceed to the next sections, the left side bar and the contents section. You will understand
    how I was able to divide the area into two unequal vertical areas and how can we do more such
    divisions. As stated earlier, Twitter Bootstrap is a 12 grid system. You have to remember this, always.
    This means you can make at most 12 vertical grids inside any parent grid.

    Currently we are working inside our parent wrapper class container. So we will divide the section into
    two unequal parts using the 12 grids. For the left side bar, we will use the class span4 and for the
    rightside content section we will use span8. The class names reflect my intention that the left side
    should span to four grids and the right side should span across remaining the eight grids.

    You might also like