Đã có lớp học sử dụng Bootstrap với Drupal 7

Our old training site was looking a bit long in the tooth. It was not only Drupal 6, but also had an old Acquia design several versions behind the current main site. It was time for a major update.

Step by step tutorials

Dave Myburgh, Lead developer for Acquia.com recently gave two webinars about the experience. He shares specific tips on what modules he used to keep the development lightweight and flexible.

The first recording is now available, and you can register for part 2, focusing on Bootstrap, which is today!

• Part 1 (recording): All the site building configurations, module selection and custom code required to get the site working as needed.
• Part 2 (sign up now!), 1pm EST: A deep-dive into theming with the Bootstrap framework/base theme developed originally by Twitter.

Easier to maintain and extend

For me, as a site builder on the site, I’m enjoying some awesome benefits from Bootstrap. Take for example this page which promotes our private training. On the old site, each of the sidebar items had to be created each as blocks, with visibility settings to control where they appeared. Blocks are a great layout solution particularly where you're reusing them globally across the site. However, we had many cases where single blocks were used on some key landing pages.

Now the new page takes advantage of Bootstrap’s Grid system and Components. This means to add the sidebar “panels” as they are called in Bootstrap, I add dividers with the appropriate classes. Here's an example:

<div class="col-sm-6 col-md-4">
 <div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a href="https://www.acquia.com/contact-acquia-learning-services">Looking for team training in Drupal?</a></h3>
</div>
<div class="panel-body">
<p>Training is available for either public sessions or private classroom settings. Public courses range from 1 to 5 days in length; private training packages can be customized to suit your needs. </p>
<p>Private on-site training for your team ensures learners get access to the expertise they need for case-specific questions.</p>

<p><a class="btn btn-primary btn-lg" role="button" href="https://www.acquia.com/contact-acquia-learning-services">Contact us</a></p>
</div>
</div>
</div>

I also get components like the buttons, and larger “jumbotron” text at the top of the page. Of course it wouldn’t make sense if I was going to reuse those blocks across the site. This is a better solution in my case since I’m only displaying those blocks once. You do need to apply the appropriate tool to the job.

With great power also comes responsibility. This of course means I require site building skills, HTML/CSS experience, and a safe staging environment to test all my changes on. The use case may be limited, but overall this works really well for the few one-off pages that we have on the site.

Watch the webinar Part 2 today, 1pm EST: for detailed step-by-step and demos with Dave. He'll show you how to integrate Bootstrap with Drupal.

• How to make a sub-theme with Bootstrap.
• Altering it to work with SASS (instead of the default LESS)
• Useful modules to make it easier to add Bootstrap classes