Bootstrap

Bootstrap is an open source frontend framework maintained by Twitter for developing responsive websites and web applications. It includes HTML, CSS, and JavaScript code to build user interface components. It's a fast and easy way to develop a powerful mobile-first user interface.

The Bootstrap grid system allows you to create responsive 12-column grids, layouts, and components. It includes predefined classes for easy layout options (fixed width and full width). Bootstrap has a dozen prestyled reusable components and custom jQuery plugins, such as button, alerts, dropdown, modal, tooltip tab, pagination, carousal, badges, icons, and much more.

Installing Bootstrap

Now, we need to install Bootstrap. Visit http://getbootstrap.com/getting-started/#downloadand hit on the Download Bootstrap button:

Installing Bootstrap

This includes the compiled and minified version of css and js for our app; we just need the CSS bootstrap.min.css and fonts folder. This style sheet will provide you with the look and feel of all the components, and is responsive layout structure for our application. Previous versions of Bootstrap included icons as images but, in version 3, icons have been replaced with fonts. We can also customize the Bootstrap CSS style sheet as per the component used in your application:

  1. Extract the ZIP folder and copy the Bootstrap CSS from the css folder to your project folder's CSS.
  2. Now copy the fonts folder of Bootstrap into your project root directory.
  3. Open your index.html in your editor and add this link tag in your head section:
            <link rel="stylesheet" href="css/bootstrap.min.css">.

That's it. Now we can open up index.html again, but this time in your browser, to see what we are working with. The following is the code that we have written so far:

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
        <meta charset="utf-8"> 
<title>ReactJS Chapter 1</title> 
 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
          
<script type="text/javascript" src="js/react.min.js">
</script> 
<script type="text/javascript" src="js/react-dom.min.js">
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
        <!--[if lt IE 8]> 
            <p class="browserupgrade">You are using an
            <strong>outdated</strong> browser.  
            Please <a href="http://browsehappy.com/">upgrade
            your browser</a> to improve your experience.</p> 
        <![endif]--> 
        <!-- Add your site or application content here --> 
     
    </body> 
</html>
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset