WordPress is great, Bootstrap is cool, I want to use them together!
For Twitter Bootstrap to work you need to include at least three files in any of your web pages:
- bootstrap.css (included with the Bootstrap download)
- bootstrap.js (included with the Bootstrap download)
- jquery.js
A WordPress theme needs, at a bare minimum, two files: style.css and index.php.
Download WordPress and install it. Create a new theme. Download Bootstrap and unzip it to your theme’s folder. OK.
Step one
Include bootstrap.css in your theme style.css:
@import url("bootstrap/css/bootstrap.min.css");
In fact, here’s the complete style.css:
/* Theme Name: My New WordPress Theme Theme URI: http://localhost Description: WordPress Test Theme Author: My Name Here Author URI: http://localhost Template: */ /* * 1. Import the Bootstrap css */ @import url("bootstrap/css/bootstrap.min.css"); /* * Some fancy styling for Bootstrap spans */ .span4, .span8 { background-color: #ade; }
Step two
Bootstrap needs JQuery to work so link to it in your theme index.php:
<!-- 2. Bootstrap needs JQuery --> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
Step three
Include bootstrap.js in index.php:
<!-- 3. Import Bootstrap.js --> <script src="bootstrap/js/bootstrap.min.js"></script>
index.php looks like this:
<! DOCTYPE html> <html> <head> <title>My New WordPress Theme</title> <!-- The theme's style.css file --> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- 2. Bootstrap needs JQuery --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- 3 .Import Bootstrap.js --> <script src="bootstrap/js/bootstrap.min.js"></script> <?php wp_head(); ?> </head> <body> <!-- Bootstrap in action --> <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> <p>Just to</p> </div> <div class="span8"> <p>see if it works</p> </div> </div> <div class="row-fluid"> <div class="span4"> <ul class="nav nav-pills nav-stacked"> <li><a href="#">create</a></li> <li><a href="#">a few</a></li> <li><a href="#">stacked</a></li> <li class="active"><a href="#">Bootstrap</a></li> <li><a href="#">pills</a></li> </ul> </div> <div class="span8"> <p>Random content here.</p> </div> </div> </div> <?php wp_footer(); ?> </body> </html>
0 comments:
Post a Comment