css3
Showing posts with label css3. Show all posts
Showing posts with label css3. Show all posts

Saturday, 27 September 2014

BootStrap Technology For Responsive Websites

22:10 No Comments
Bootstrap is very good  and simple to use technology for making your website Mobile Compatible . It helps to make your website compatible with every you open it . Regardless of the screen size where we opens the website it provides full Responsiveness

Bootstrap File Structure

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




BootStrap Online File Links


 For Making your website Responsive using Bootstrap Technology You require some css , js coded files you can then use classes defined in these files to make your website responsive  you can either download these files from links below or you can directly provide these links in <head > </head> Tag of your Html or jsp or aspx file .
 For using Offline files :- 
 Go to links below one by one and this will open css code save the files with their respective names and then reference them in your page <head></head> Tag


For using Online Files :- 




Just include the following code lines in your page's <head></head> Tag


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



A Simple Sample of Bootstrap Html Page  Below :-






<!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 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>







Grid System In Bootstrap


Grid systems are used for creating page layouts through a series of rows and columns that house your content. Bootstrap's Grid system has done a lot of ease for developers Instead of doing calculations for div's like they do before bootstrap technology they can easily divide the page into columns and rows and design the page according to it .



 Here's how the Bootstrap grid system works:


    

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. A container will contain all your divs
    • 



    

  • Use rows to create horizontal groups of columns.
    • 

  • Content should be placed within columns, and only columns may be immediate children of rows.
    • 



    

  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
    • 



    

  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
    • 

  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
    • 



    

  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
    • 



    

  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
    • 



    

  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
    • 



Reference Links

1. http://getbootstrap.com/
2. http://getbootstrap.com/css/
Subscribe to: Posts (Atom)