How can we use Twitter Bootstrap Them In Blogspot site
By SHAFIULLAH
First I introduce you about Bootstrap. Bootstrap is free and open-source tools i mean coding system for built a website in highly CSS effects. So there have some predefined CSS Style and HTML code for using it. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. So "@" sign is use for coding in Bootstrap them
There have four section in a predefined Bootstrap them.
1. Scaffolding
Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
2. Base CSS
Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
3.Components
Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
4.JavaScript plugins
Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
So if you want to learn more please go to HERE. Or you can learn form W3Schools. But Bootstrap them is a different them from Blogspot them. Its also difficult to mix both of them. The web designer use some technique for use Font Awesome from Bootstrap them. This tutorial i want to show you how we can use a text slide effect from twitter Bootstrap them.
First we nee to see the demo of slide from HERE. Please see the below menu bar Text Sliding Effect. its from Blogspot site. Now see the original Bootstrap them. See below PORTFOLIO MENU.
Now go to your template. Open as HTML as below
Then you need to put you Bootstrap code below menu bar. Just write Ctrl+F . Then find your menu bar. Such as "Science/Sports" or any thing. Or any where you can wish to put. Be aware about risk of Blogspot editing. You can lost it anytime. So before editing, please save the them.
Then past it from below
...................................................................................................................................................................
<div style='clear:both;'/>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol1' showaddelement='yes'/>
</div>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='http://www.w3schools.com/lib/w3.css' rel='stylesheet'/>
<body>
<style>
#text {
z-index: 100;
position: absolute;
color: orangered;
font-size: 24px;
font-weight: bold;
left: 500px;
top: 550px;
}
#image {
position: absolute;
left: 1500;
top: 1500;
height:350px;
width:300px;
width: 69%;
}
</style>
<p id='text'>
<body>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'/>
<div class='carousel slide text-center' data-ride='carousel' id='myCarousel'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<h4>"This company is the best. I am so happy with the result!"<br/>
<span style='color:OrangeRed;'>Managing Director, Keeco Limited</span>
</h4>
</div>
<div class='item'>
<h4>"One word... WOW!!"<br/><span style='font-style:normal;color:OrangeRed;'>Manager,Getco</span></h4>
</div>
<div class='item'>
<h4>"Could I... BE any more happy with this company?"<br/><span style='font-style:normal;color:OrangeRed;'>C.E.O, Sperry</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel' role='button'>
<span aria-hidden='true' class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel' role='button'>
<span aria-hidden='true' class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
</div>
</body>
</p>
</body>
...................................................................................................................................................................
After add this code, please go to the last line
Add an extra tag </div> before</html> or </body> tag. Or click on save button and see what your web alert ask to do you?? then past </div> code.
See what happen. if everything is OK then your website see the Bootstrap Text Sliding Effect on Blogspot site.
Happy web designing....
No comments:
Post a Comment