Cochran / Whitley Bootstrap Site Blueprints

Without Bootstrap your web designs may not be reaching their full potential. This book will change that through a series of hands-on projects covering everything from custom icon fonts to JavaScript plugins.
1. Auflage 2024
ISBN: 978-1-78216-453-1
Verlag: De Gruyter
Format: PDF
Kopierschutz: Adobe DRM (»Systemvoraussetzungen)

E-Book, Englisch, 304 Seiten

A hands-on guide with projects based on fictitious, but common, application development briefs, which will illustrate practical ways of applying responsive web design with Bootstrap. Whether you are a beginner or intermediate web developer, if you wish to make the most of Bootstrap, then this book is for you. You should be familiar with the fundamentals of HTML and CSS, and have some experience incorporating JavaScript plugins. Prior Bootstrap experience is optional.

Autoren/Hrsg.

Cochran, David

Whitley, Ian

Fachgebiete

• Mathematik | Informatik EDV | Informatik Programmierung | Softwareentwicklung Webprogrammierung

Inhaltsverzeichnis

Table of Contents

Leseproben

Compiling and linking default Bootstrap CSS

We could have just brought over Bootstrap's default file, but let's use this opportunity to take a trial run at compiling the LESS files. This will ensure we've got the fundamentals ready for doing more serious work to come.

Compiling Bootstrap CSS

If you've worked with LESS before, this will be a familiar territory. If you have not worked with LESS before, I'll help you along. However, I highly recommend that you stop and refer to the documentation at http://lesscss.org. Additionally, you may want to find a good basic LESS tutorial and work through it. As you'll soon see, working with LESS is powerful and fun, and the time spent learning will reward well.

For this first step, we won't be writing any LESS files, only compiling.

Navigate to and open it in your editor. You'll see that this file imports all the other files from the folder. When compiled, this file generates the complete stylesheet. This is what we want for our first step.

If you've not compiled LESS files before, you'll need to download and install one of the following compilers:

• For Windows users, download and install the following compiler:
  • WinLess (a free desktop application), which can be found at http://winless.org
• For Mac users, download and install the following compilers:
  • The LESS app (free), which can be found at http://incident57.com/less/
  • CodeKit (not free), which can be found at http://incident57.com/codekit/

Once your chosen LESS compiler is downloaded, installed, and ready for action, the following are your steps to be performed:

1. Create a new folder named in the main directory at the same level as the , , , and folders.
2. Use one of the following two methods to add your project's main folder (the parent folder of , , , , and so on) to your compiler:
   • Drag-and-drop the folder into the application window
   • Alternatively, navigate to the application's File | New Project menu to add the parent folder
3. You should see that the application loads the LESS files (and perhaps other files) into its window. Search or scan for the file.
4. Right-click on . Select Set output path (or your application's similar option). Navigate to the folder you created earlier. The file should automatically be named . Click on Select.
5. With the output path set, now click on Compile.
6. Check to see that was created in the folder.

   Note

   
   

   If you run into problems, check your compiler's log to ensure it was successful, then double-check your output path. In addition, you may run into a situation where your chosen compiler runs into an error because it has not been updated to stay in sync with the development of LESS. I have recently found this with another free compiler. If your compiler refuses to compile the default Bootstrap LESS files, it's an indication that the compiler needs updating.

7. Once the file is in place in the folder, we only need to coordinate our file's name with the stylesheet link in our file.
8. In , remove the stylesheet link to , as normalize is included in Bootstrap ( is the first file imported by ).
9. The remaining stylesheet link looks for the file. Because we'll be customizing Bootstrap to generate our own custom stylesheet, let's leave this link as it is. In the forthcoming steps, we'll use for the custom styles we generate.
10. For now, let's cheat by making a copy of . In the folder, create a copy of . Name the copy as (in the future steps, we'll overwrite this file with our customizations) as shown in the following screenshot:
11. Refresh your browser. You should now see Bootstrap 3's default navigation styles, and you'll see some typographic enhancements as shown in the following screenshot. This is Bootstrap CSS at work. Congratulations!

We now have the default Bootstrap styles in place. Now, let's complete our navbar by making it responsive. As a bonus, this will test to ensure that Bootstrap's JavaScript plugins are working as they should.

Completing the responsive navbar

To complete our navbar to take advantage of Bootstrap's responsive navbar solution, we need to add two new elements, with appropriate classes and data attributes. You'll find this documented under Bootstrap's Components page, under the Navbar tab at http://getbootstrap.com/components/#navbar.

We'll begin by adding the necessary additional markup as follows:

1. Search for . Inside this element, we'll add the button, which will be used to slide the responsive navbar open and closed. The following is what you'll need (and I will include the as the parent element):
   Project name

   A few notes about the preceding code are as follows:

   • The button includes a class of for CSS styles.
   • The data attributes are used by Bootstrap's collapse JavaScript plugin to indicate its desired behavior and its desired target, namely an element with the class. This element is coming in the next step.
   • The spans of the class are used by the CSS to create the small horizontal bars in the toggle button.
2. Now to wrap the navigation items within a collapsing div, wrap with a div with the appropriate Bootstrap classes as follows:
   • Home
   • Link
   • Link

In the preceding two steps, I've divided the resulting code into two halves and all within . To double-check your work, see the full code in the sample code for this chapter.

Note

The tag structure, class names, or data attributes may change with future versions of Bootstrap. If yours does not work as it should, be sure to check Bootstrap's own documentation. As a fallback option, you can start with the starting files provided with the sample code for this book.

Now save the file and refresh your browser. Using a modern browser (such as IE9 or a recent version of Firefox, Google Chrome, or Safari), click on and drag the edge of the browser window to make the window narrower than 980px.

If all works as it should, you should see a collapsed version of the navbar, as shown in the following screenshot, with the site name or logo and a toggle button.

This is a good sign! Now click on the toggle button, and it should slide open, as shown in the following screenshot:

Success! Congratulations!

Troubleshooting

If things are running smoothly at this point, it means that you've successfully compiled Bootstrap's CSS from LESS, and you've also successfully included Bootstrap's JavaScript plugins.

If things are not running smoothly, you should double-check the following things:

• Is your markup properly structured? Any unclosed, incomplete, or malformed tags, classes, and so on present?
• Did you successfully compile Bootstrap's LESS to CSS? And did the resulting CSS file wind up in the correct folder under the proper name?
• Is the CSS link in the head of updated as it should be?
• Have you successfully included Bootstrap's JavaScript plugins?

You might find it helpful to do the following:

1. Work back through the preceding steps, double-checking things along the way.
2. Validate your HTML to ensure it's well formed.
3. Compare the completed version of the exercise files with your own.
4. Refer to the Bootstrap documentation for new updates to the relevant tag structures and attributes.
5. Place your code in a snippet at http://jsfiddle.net/ or http://www.codepen.com/, and share it with the good...

Über Autor(innen)

Cochran David :

David Cochran serves as an associate professor of communication at Oklahoma Wesleyan University. He has been teaching interactive design since 2005. When Twitter Bootstrap was first released in August 2011, he recognized it as a tool that would speed up development while supporting best practices. Thus, he began folding Bootstrap into his university courses, much to the benefit of his students.Whitley Ian :

Ian Whitley developed a passion for writing and literature at a young age. In 2010, he developed a deep interest in web development and decided to get involved in it. He was one of the early adopters of Twitter Bootstrap when it was first released in 2011. With the help of David Cochran, he quickly conquered the system and has used it for many different web projects. Currently, he uses Bootstrap in relation to WordPress, using both in conjunction to create custom and creative solutions for his client.