Lastly calendar week we began the novel web page layout with Bootstrap 3, right this moment we're going to destination it. Right this moment we think about creation of the next parts: sidebar, citation, foremost content material, ‘our team’ block, footer, twitter feed, website map together with social buttons. As normal, we testament add together them stair past stair, stylizing our parts.
Sidebar
Inward the sidebar, inward improver to the submenu can be the picture with the situation of places of work.
To show it, we testament method the ingredient “panel”, more than precisely – its variation ‘main panel’ (panel-primary) for coloring title. This ingredient comprises the header block (panel-heading) together with the content material block (panel-body). So we add together course img-responsive for the picture map, that testament lower the picture for little screens (responsiveness).
<apart course="col-md-7">
…
<div course="panel panel-primary">
<div course="panel-heading">Our places of work</div>
<div course="panel-body">
<img src="images/map.png" course="img-responsive" alt="Our offices">
</div>
</div>
</apart>
We already set the shade for the background of the panel (panel-bg) inward bootstrap’s attributes, together with at present we dot out that ‘primary’ panel testament have got a greyness border of default panel, non blueish, as past default:
@panel-primary-border: @panel-inner-border;
At present, inward kinds of the positioning we demand to alter the default settings of panels that tin can non live modified through variables:
.panel
Hither we have got eliminated the shadow of panels, set customized margins together with set ain font for the header.
Citation
We testament begin the layout of the content material past including the citation.
This ingredient of the web page is most just like the Jumbotron ingredient. Add together it to the column of content material:
<subdivision course="col-md-17">
<div course="jumbotron">
<blockquote>
<p> "Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat."
</p>
<little>John Doe, Lorem Ipsum</little>
</blockquote>
</div>
</subdivision>
Through variables of the jumbotron ingredient we outline the white shade of textual content together with branded blueish background:
@jumbotron-bg: @brand-primary;
@jumbotron-color: #fff;
As well as draw our kinds:
physique {
…
.wrapper {
…
.jumbotron {
border-radius: zero;
padding: zero;
margin: zero;
blockquote
}
}
}
Hither we take rounding corners, paddings together with decorations of the citation which might be outlined inward Bootstrap past default. We additionally add together our font kinds.
Essential content material
All needed kinds for textual content of our content material we’ve already added before. So, it stays to add together solely 3 paragraphs with the textual content:
<p>Lorem ipsum dolor sit down amet...</p>
<p>Donec vel nisl nibh...</p>
<p>Donec vel nisl nibh...</p>
The following stair is to add together 2 pictures, which might be beneath the textual content. That is completed utilizing 2 columns:
<div course="row">
<div course="col-md-12">
<img src="images/about-1.png" alt="" course="thumbnail">
</div>
<div course="col-md-12">
<img src="images/about-2.png" alt="" course="thumbnail">
</div>
</div>
Course thumbnail transforms pictures into nice wanting thumbnails. Thus it does all of the piece of work for us for styling pictures. We solely demand to set our ain margin together with border shade inward the variables for this ingredient:
@thumbnail-padding: 1px;
@thumbnail-border: #c9c9c9;
‘Our team’ block
Foremost, we add together the header for this subdivision:
<h2>Our squad</h2>
with the next kinds
physique
As well as and then add together the block with the course squad, that consists of 2 strains containing playing cards of staff. Every card is a column. Each card has a width equal to iv columns of our grid. All playing cards besides the first off line have got the margin on the left, that's created with col-sm-offset-1 course. Each card consists of picture together with description:
<div course="team">
<div course="row">
<div course="col col-sm-4">
<img src="images/team/Doe.jpg" alt="John Doe" course="thumbnail">
<div course="caption">
<h3>John Doe</h3>
<p>ceo</p>
</div>
</div>
<div course="col col-sm-4 col-sm-offset-1">
<img src="images/team/Pittsley.jpg" alt="Saundra Pittsley" course="thumbnail">
<div course="caption">
<h3>Saundra Pittsley</h3>
<p>squad chief</p>
</div>
</div>
…
</div>
<div course="row">
<div course="col col-sm-4">
<img src="images/team/Nobriga.jpg" alt="Ericka Nobriga" course="thumbnail">
<div course="caption">
<h3>Ericka Nobriga</h3>
<p>fine art managing director</p>
</div>
</div>
<div course="col col-sm-4 col-sm-offset-1">
<img src="images/team/Rousselle.jpg" alt="Cody Rousselle" course="thumbnail">
<div course="caption">
<h3>Cody Rousselle</h3>
<p>senior ui designer</p>
</div>
</div>
…
</div>
</div>
After creating this markup, we outline the next kinds for these parts:
physique {
…
.wrapper {
…
.squad {
.row
}
}
}
Inward improver to paddings together with fonts, we modified the course col-sm-offset-1. The touchstone margin was too large, so we modified it to 3.7%.
Footer
Footer consists of iv main elements: the Twitter feed, website map, social hyperlinks together with emblem with copyright textual content.
Foremost, we create a container for the footer with these blocks:
<footer>
<div course="container">
<div course="row">
<div course="col-md-8 col-xs-12 twitter"></div>
<div course="col-md-4 col-xs-12 sitemap"></div>
<div course="clearfix visible-sm visible-xs"></div>
<div course="col-md-6 col-xs-12 social"></div>
<div course="col-md-6 col-xs-12 footer-logo"></div>
</div>
</div>
</footer>
and then we customise it:
footer
Tag footer defines a greyness expanse throughout the width of the covert, together with inside container shows some other expanse that's centered on the big screens together with units the peak together with margin of the footer. To align blocks inside the footer, we usage columns.
Twitter feed
The markup of the twitter feed is the next:
<div course="col-md-8 col-xs-12 twitter">
<h3>Twitter feed</h3>
<time datetime="2015-03-03"><a href="#">03 mar</a></time>
<p>Inward ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. Inward eget mi dui, sit down amet scelerisque nunc. Aenean aug</p>
</div>
At present we outline kinds for this subdivision:
physique {
…
footer
}
For all titles of footer we specify fonts together with margins, together with underline the underside body. For paragraphs we set paddings. For the hyperlink that shows the engagement, we set the shade together with underlining.
Sitemap
Website map consists of 2 equal columns with hyperlinks:
<div course="col-md-4 col-xs-12 sitemap">
<h3>Sitemap</h3>
<div course="row">
<div course="col-md-12">
<a href="/home/">Place</a>
<a href="/about/">Near</a>
<a href="/services/">Providers</a>
</div>
<div course="col-md-12">
<a href="/partners/">Companions</a>
<a href="/customers/">Back up</a>
<a href="/contact/">Contact</a>
</div>
</div>
</div>
We apply a shade, font together with margin for the hyperlinks:
physique {
…
footer
}
Social buttons
We lay a set of hyperlinks (buttons) inward the block with the social course:
<div course="col-md-4 col-xs-12 social">
<h3>Social networks</h3>
<a href="http://twitter.com/" course="social-icon twitter"></a>
<a href="http://facebook.com/" course="social-icon facebook"></a>
<a href="http://plus.google.com/" course="social-icon google-plus"></a>
<a href="http://vimeo.com/" course="social-icon-small vimeo"></a>
<a href="http://youtube.com/" course="social-icon-small youtube"></a>
<a href="http://flickr.com/" course="social-icon-small flickr"></a>
<a href="http://instagram.com/" course="social-icon-small instagram"></a>
<a href="/rss/" course="social-icon-small rss"></a>
</div>
As well as Styling the footer with hyperlinks:
physique {
…
footer {
…
.container
}
}
Hither we used the strategy of sprites – when 1 picture file is used for various pictures. All hyperlinks are divided into big icons (.social-icon) together with little (.social-icon-small). We set our sprite picture to those courses as inline block with with mounted sizes together with the identical background. As well as and then with CSS we shifted the background so that every hyperlink testament show the corresponding picture.
Copyright
Block with copyright together with emblem – it's a image with hyperlink together with a paragraph with textual content beneath it.
<div course="col-md-8 col-xs-12 footer-logo">
<a href="/"><img src="images/footer-logo.png" alt="Whitesquare logo"></a>
<p>Copyright © 2015 Whitesquare.</p>
</div>
Kinds are just like the earlier blocks with the one distinction that the block is aligned to the suitable facet together with alignment inside it as good on the suitable:
physique {
…
.footer
}