Judul : BOOTSTRAP GUIDNACE
link : BOOTSTRAP GUIDNACE
BOOTSTRAP GUIDNACE
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 :
(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 :
Demikianlah Artikel BOOTSTRAP GUIDNACE
Sekianlah artikel BOOTSTRAP GUIDNACE kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel BOOTSTRAP GUIDNACE dengan alamat link https://othereffect.blogspot.com/2016/05/bootstrap-guidnace.html
0 Response to "BOOTSTRAP GUIDNACE"
Post a Comment