Or, you can have four narrow columns:
<div class="row"> <p class="span3">Narrow paragraph. Narrow paragraph. Narrow paragraph. Narrow paragraph.</p> <p class="span3">Narrow paragraph. Narrow paragraph. Narrow paragraph. Narrow paragraph.</p> <p class="span3">Narrow paragraph. Narrow paragraph. Narrow paragraph. Narrow paragraph.</p> <p class="span3">Narrow paragraph. Narrow paragraph. Narrow paragraph. Narrow paragraph.</p> </div>
Or, even a left-hand sidebar, with main text on the right:
<div class="row"> <p class="span2">Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.</p> <p class="span10">Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text.</p> </div>
Now, it's true that these class names lack any semantic value, and they are in some ways a new-fangled technique for doing tables—which, as all of us know, are a terrible non-CSS way to do layout. But, the advantages are huge. I know that these classes have made it far easier for me to experiment with layouts, moving text to different places on the page, and understanding what will happen to the rest of the items on my page when I do so.
Now, Bootstrap provides a number of classes that are not meant to be used on their own, but rather in conjunction with other classes. For example, you always can have a title that uses the h1 tag, but perhaps you really want the h1 to stick out on your home page. To do that, just add the "hero-unit" class to your h1's list of classes. The fact that each tag may contain any number of classes makes it trivially easy to add and remove design styles from Bootstrap and to experiment with what different ones will look like.
Now, it's true that h1, h2 and their friends get styled nicely by default when you use Bootstrap, setting not only the font size and boldface but also the line height. But, you can make them even snazzier than the defaults, by (you guessed it) using some of Bootstrap's classes. If your h1 is the page header, you can enclose it in a div whose class is "page-header".
Non-headlined text can enjoy some treats too. If you want some text, such as a glossary definition, to appear when the user's mouse cursor hovers over it, just wrap the text in an "abbr" tag:
<abbr title="GNU'S Not Unix!">GNU</abbr>
Text with such an abbr tag has a light underline beneath it, which allows users to identify such text more easily.
Tables get some fancy styling as well. By using the table-striped class, you automatically can have alternate rows contain a light background color to distinguish them.
Bootstrap also has strong support for HTML forms. Like all other block-level elements, the "form" tag can take a "spanN" class, indicating its width. But the form itself will look much spiffier than would be the case without Bootstrap. Text fields are sized appropriately and get a nice shadow when they receive the input focus. Submit buttons have nicely rounded corners, and the mouse cursor changes to a pointer when hovering over them.
But wait, it gets better. Let's say you want your submit button to be a bit larger than usual. Well, just add the "btn-large" class to the "input" tag, and you'll have a larger button. You also can use btn-small or btn-mini for buttons of other sizes.
You also can colorize your buttons by setting additional classes. The "btn-primary" class will use Bootstrap's primary color (blue, by default). But, instead you can use "btn-danger" (for red), "btn-warning" (for yellow) and a host of other colors. In this way, Bootstrap is using CSS classes semantically. I find it very useful to be able to think in terms of what the buttons are for, rather than what color they contain. The levels and colors are consistent across Bootstrap as well. If you put text within a span or div with both the "label" and "label-warning" classes, or the "badge" and "badge-warning" classes, the text will be highlighted with the warning color. You also can have button groups, labeling of check boxes and radio buttons (so people can click on the text, not just the widget), and many other features.
Senior Columnist, Linux Journal
Web Development News
|Non-Linux FOSS: libnotify, OS X Style||Jun 18, 2013|
|Containers—Not Virtual Machines—Are the Future Cloud||Jun 17, 2013|
|Lock-Free Multi-Producer Multi-Consumer Queue on Ring Buffer||Jun 12, 2013|
|Weechat, Irssi's Little Brother||Jun 11, 2013|
|One Tail Just Isn't Enough||Jun 07, 2013|
|Introduction to MapReduce with Hadoop on Linux||Jun 05, 2013|
- Containers—Not Virtual Machines—Are the Future Cloud
- Lock-Free Multi-Producer Multi-Consumer Queue on Ring Buffer
- Linux Systems Administrator
- Introduction to MapReduce with Hadoop on Linux
- Weechat, Irssi's Little Brother
- Senior Perl Developer
- Technical Support Rep
- One Tail Just Isn't Enough
- UX Designer
- Download "Private PaaS for the Agile Enterprise"
- notifier shortcomings
15 min 31 sec ago
1 hour 52 min ago
- Android User
1 hour 54 min ago
- Reply to comment | Linux Journal
3 hours 47 min ago
6 hours 36 min ago
- This is a good post. This
11 hours 49 min ago
- Great, This is really amazing
11 hours 51 min ago
- These posts are really good
11 hours 53 min ago
- It’s a really great site you
11 hours 55 min ago
- Beautiful ... I love your
12 hours 21 min ago