Bootstrap is a toolkit, which is developed by the Twitter team. This actually helps you to develop web applications much faster.Bootstrap contains CSS and Javascript files using which you can enrich your web page with Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts etc,. This avoids cross browser compatibility problem. This time I am aiming to explain how to design a template of the basic fluid blog for different resolutions and devices like iPad and iPhone.
Grids
This is the Grid System using Twitter Bootstrap, it supports 940px wide 12 column Grids. The span1 class has a width of 40px.
Layout
The page container div is divided into two parts consisting of one main areaspan8 for articles and a sidebar span4 for other information. Here I have appliedrow-fluid class.This is for responsive design and multiple resolutions for devices.It makes auto re-sizing of the divs and images easily possible .
<div class="container">
<div class="row-fluid">
<div class="span8">
// Main Part
</div>
<div class="span4">
// Sidebar Part
</div>
</div>
</div>
The above code layout wireframe.
Main Part
Here the articles feed list contains title, description and image. Here btn is the class of the read more button.
<div class="span8">
// Main Part
<div class="row">
// Articles Loop
<div class="span7">
<h2>Article Title.</h2>
<p>Article Description.</p>
<p><img src='ArticleImage.png' class="row-fluid"></p>
<p><a class="btn" href="#">Read More »</a></p>
</div>
</div>
// Articles Loop End
</div>
</div>
For different color buttons just apply below class names.
Sidebar
This block for author information, widgets, recent posts and other stuff.
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.
MENSAJE
OPERACIÓN EJECUTADA
We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".
These cookies are necessary for the website to function and cannot be disabled on our systems. They are generally only set in response to your actions in requesting services, such as setting your privacy preferences, logging in or completing forms. You can set your browser to block or alert you to these cookies, but some areas of the site will not work. These cookies do not store any personally identifiable information
Performance Cookies
These cookies allow us to count visits and traffic sources so that we can assess the performance of our site and improve it. They help us know which pages are the most or least visited, and how visitors navigate the site. All information collected by these cookies is aggregated and therefore anonymous. If you do not allow these cookies to be used, we will not know when you visited our site and will not be able to assess whether it worked properly
Functional Cookies
These cookies allow the website to provide better functionality and customization. They may be set by our company or by external providers whose services we have added to our pages. If you do not allow these cookies to be used, some of these services may not function properly
Targeted Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to profile your interests and display relevant ads on other sites. They do not directly store personal information, but are based on the unique identification of your browser and Internet device. If you do not allow these cookies to be used, you will see less targeted advertising