Difference between revisions of "Introducing bootstrap"

From MyWiki
Jump to: navigation, search
(Created page with "'''Bootstrap :'''<br> Referenced list this in page header<br> <source lang="html"> <link rel="stylesheet" type="text/css" href="bootstrap.css" /> </source>...")
 
 
(6 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
Referenced list this in page header<br>
 
Referenced list this in page header<br>
<source lang="html">
+
<source lang="html4strict">
 
<link rel="stylesheet"
 
<link rel="stylesheet"
 
       type="text/css"
 
       type="text/css"
Line 10: Line 10:
  
 
you can  have as many stylesheets as you like
 
you can  have as many stylesheets as you like
each s
+
each one can override a previous one <br>
  
 +
'''Responsive grid'''<br>
  
 +
In bootstrap everythins is in "<div>" tags<br>
  
responsive grid
+
<source lang="html4strict">
 
+
everything in divs tage in bootstrat
+
 
+
 
<div class="container">
 
<div class="container">
 
<h1> this is my first web page </h1>
 
<h1> this is my first web page </h1>
Line 31: Line 30:
  
 
</div>
 
</div>
 +
 +
</source>
 
Each panel adds up to 12 rows
 
Each panel adds up to 12 rows
  
create a new class called thin_border
+
create a new class called thin_border and add it to the classes above
 +
<source lang="html4strict">
 
.thin_border{
 
.thin_border{
 
border: 1px solid black;
 
border: 1px solid black;
 
}
 
}
 +
</source>

Latest revision as of 16:50, 20 November 2015

Bootstrap :

Referenced list this in page header

<link rel="stylesheet"
      type="text/css"
      href="bootstrap.css"
       />

you can have as many stylesheets as you like each one can override a previous one

Responsive grid

In bootstrap everythins is in "
" tags
<div class="container">
<h1> this is my first web page </h1>
 
          <div class="row">
                 <div class="col-md-6 thin-border">
                      Some content here for panel 1
                 </div>
                 <div class="col-md-6">
                      Some content here for panel 2
                 </div>
          </div>
 
</div>

Each panel adds up to 12 rows

create a new class called thin_border and add it to the classes above

.thin_border{
border: 1px solid black;
}