Custom CSS Styles with the Bootstrap Theme Roller
Once you have the Bootstrap Theme Roller created and downloaded. You will need to add the files to your website. The image to the right shows what the responsive template looks like before you add the Bootstrap Theme. You can compare what the theme looks like before the bootstrap is added and after in the following files. Below are the files you will need for the tutorial.
The first thing you will need to do is copy all the Bootstrap Theme Roller files to your Responsive Template. Below are the steps to do this.
Note! Downloading the Bootstrap Theme Roller page to your computer will save a copy of all the code you will need to add the styles to your Responsive Template. This is for your reference only and will be used through out this tutorial series to get the code you need for your Bootstrap theme.
Important! The ga.js and the jquery.js are required for the drop menus and other behaviors to work. If your menus do not work, you may not have these files.
<link href="css/bootstrap.css" rel="stylesheet">
Now that you have the links in your head section, you will need to copy the ga.js and the jquery.js to your js folder in your Responsive Template. Copy the ga.js and the jquery.js files to your js folder.
bootstrap.js bootstrap.min.js ga.js jquery.js
Now you have all the files necessary to develop your Bootstrap Responsive template. The next step is to add th SS classes and the HTML code to your site to make the styles come alive.
‹Section 8: Custom CSS Styles with the Bootstrap Theme Roller
›Section 10: Adding the Bootstrap Menu Buttons to your Responsive Template
We value your feedback!
new! - Enter your name and email address above and we will post your feedback in the comments on this page!
Introduction to Responsive Web Design
|1.||Introduction: Creating a Responsive Web Design|
Creating a Custom Responsive Template
|2.||Step 1: Adding HTML to the Responsive Template|
|3.||Step 2: Adding CSS styles to a Responsive Template|
|4.||Step 3: Links to the stylesheets in Responsive Templates|
|5.||Step 4: Adding the Viewpoint Meta Tag to the Responsive Template|
Customize the look of your Responsive Template
|6.||Responsive template design with the jQuery Theme Roller|
|7.||Styling a Responsive Template with jQuery Theme Roller|
|8.||Custom CSS Styles with the Bootstrap Theme Roller|
|9.||Adding the Bootstrap files to your Responsive Template|
|10.||Adding the Bootstrap Menu Buttons to your Responsive Template|
|11.||Twitter Bootstrap Common classes and HTML styles|
Free Responsive Web Design Themes
|12.||Free Responsive Templates with jQuery Theme Roller styles|
2015-01-08 5:25 am
very helpful post for Responsive Web Designers, they will easily understand how to configure and add links in header section !! Thanks...