Now, if this seems like a lot of work just to get started with LESS, you're right. And in general, you probably won't want to start off adjusting the source LESS files, but rather just playing with the resulting CSS classes and other goodies Bootstrap provides. To do that, you simply can take a snapshot of the compiled CSS files created by LESS. One quick-and-dirty way to do this is to grab the CSS file that came with the Bootstrap documentation; although you won't be able to change things in the LESS source, it's good enough for beginning purposes. Just look in docs/assets/css/bootstrap.css, and copy that into your Web project.
A middle ground, which allows you to customize things easily but doesn't require that you install and use the LESS compiler each time, is to use the Bootstrap configure-and-download functionality, from the Bootstrap home page. Enter the colors and basic design paradigms you want to use, and you'll get a custom CSS file delivered to your browser.
In every case except for the in-browser LESS compiler, you always will end up with a CSS file, typically named bootstrap.css. This file should be placed, not surprisingly, alongside your other CSS files, and then incorporated into your HTML file in the standard way:
<link href="/bootstrap.css" media="all" ↪rel="stylesheet" type="text/css"/>
If you fire up your HTML file with just that, you'll see...well, almost nothing. A little bit has changed, namely the default fonts and margins (which probably have disappeared). But for the most part, you really haven't changed anything, and there aren't any obvious benefits. That's because Bootstrap is an à la carte system, in which you can take any or all of it, depending on your interests and needs.
That said, one thing that you'll almost certainly want to do is add a div tag with the "container" class immediately within your body tag, as follows:
<!DOCTYPE html> <html lang="en"> <head> <h3>ATF</h3> <link href="bootstrap.css" media="all" rel="stylesheet" ↪type="text/css" /> </head> <body> <div class="container"> <h1>Title</h1> <p>Body</p> <p>Body 2 <ul> <li>Thing One</li> <li>Thing Two</li> <li>Thing Three</li> </ul> </p> </div> </body> </html>
If your system is like mine, you'll see that the contents have shifted over to the right, with a large left-hand margin. Actually, the size of the margin depends on the width of your browser. By using a div within the body, the width of that div can stay relatively stable, even as the browser width changes around it.
Now, things truly become interesting when you start to divide your file into separate rows. You see, Twitter Bootstrap provides you with a grid—meaning that you divide your text into rows, and that each row consists of content, each of which consumes a certain number of columns. Bootstrap uses a 12-column grid, meaning that within any row, you can mix and match text using any combination of 12 columns. You indicate how many columns wide something should be by assigning a class of "spanN" to your HTML element, where N is a number between 1 and 12, inclusive.
For example, you can have a wide paragraph as follows:
<div class="row"> <p class="span12">Wide paragraph. Very wide paragraph. Super-duper wide paragraph. Fill the screen's width paragraph. Use lots of text to fill the screen's width paragraph.</p> </div>
Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.
With all the industry talk about the benefits of Linux on Power and all the performance advantages offered by its open architecture, you may be considering a move in that direction. If you are thinking about analytics, big data and cloud computing, you would be right to evaluate Power. The idea of using commodity x86 hardware and replacing it every three years is an outdated cost model. It doesn’t consider the total cost of ownership, and it doesn’t consider the advantage of real processing power, high-availability and multithreading like a demon.
This ebook takes a look at some of the practical applications of the Linux on Power platform and ways you might bring all the performance power of this open architecture to bear for your organization. There are no smoke and mirrors here—just hard, cold, empirical evidence provided by independent sources. I also consider some innovative ways Linux on Power will be used in the future.Get the Guide
|Nativ Disc||Sep 23, 2016|
|Android Browser Security--What You Haven't Been Told||Sep 22, 2016|
|The Many Paths to a Solution||Sep 21, 2016|
|Synopsys' Coverity||Sep 20, 2016|
|Naztech's Roadstar 5 Car Charger||Sep 16, 2016|
|RPi-Powered pi-topCEED Makes the Case as a Low-Cost Modular Learning Desktop||Sep 15, 2016|
- Readers' Choice Awards 2013
- Android Browser Security--What You Haven't Been Told
- Download "Linux Management with Red Hat Satellite: Measuring Business Impact and ROI"
- The Many Paths to a Solution
- Nativ Disc
- Synopsys' Coverity
- Naztech's Roadstar 5 Car Charger
- Securing the Programmer
- CodeLathe FileCloud Google Chrome Extension
- Identity: Our Last Stand