Thursday, 19 May 2016

BOOTSTRAP GUIDNACE

03:02

First OF ALL

(1) go to   http://getbootstrap.com/

(2)click on download  "Download Bootstrap"

(3)then click on   "Download Soucre".

(4)after downloading  bootstrap   zip file   right cick on it and  extract it..
after extracting you will get  folder

bootstrap-3.3.6

(5)now create a folder   name  it  "myproject".
(6) go inside  bootstrap-3.3.6 you will get :

docs  folder

go inside  docs folder you will get  folders
dist
assets

copy  dist and assets folder  and paste inside your myproject folder.

(7)now go inside  " bootstrap-3.3.6/docs/examples/theme  "

under theme folder you will get  following files:
index.html
and theme.css


now copy  index.html and theme.css  file to your myproject folder.

(8)now open  your   index.html  file which you placed inside of your myproject folder.

 then in <head>

 </head> part you will see Bootstrap core css links:


 <head>
   

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="theme.css" rel="stylesheet">

   
  </head>


  now  change above  bootstrap  core css link as given below by removing ../../  :


  <head>
   

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="theme.css" rel="stylesheet">

   
  </head>

  now   go to  bottom of  index.html page  and change following code by removing ../../  :

  <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

after removing  you will get following  code :

<!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>

now save your index.html file  after removing  ../../  form  <head></head> as well as from bottom of Bootstrap core javascript..

Now open your  index.html     file  using any browser  then   you will get following output :


Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

PHP Training Mumbai, PHP MySQL Training Mumbai, PHP Course Mumbai, PHP Institute Mumbai

 

© 2013 PHP TRAINING IN MUMBAI BY OM SIR . All rights resevered. Designed by OM SIR

Back To Top