Cargando…
Bootstrap Site Blueprints.
In Detail Since its debut in August 2011, Twitter Bootstrap, now simply Bootstrap, has become by far the most popular framework for empowering and enhancing frontend web design. With Version 3, Bootstrap reaches an exciting new milestone, introducing a mobile-first responsive grid, new and powerful...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Packt Publishing,
2014.
|
| Temas: | |
| Acceso en línea: | Texto completo |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Authors; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: Getting Started with Bootstrap; Quantity and quality; Improving with age; The power of leaner CSS; Downloading Bootstrap; The files you'll have; Preparing a project template folder; Getting H5BP; Deleting unnecessary Boilerplate files; Evaluating the Boilerplate .htaccess file; Updating required Boilerplate files; Updating the favicon and touch icons; Pulling in the Bootstrap files; Fonts; JavaScript; Holding off on the CSS; Bringing the LESS files over; Taking inventory.
- Setting up the HTML template fileGiving your site a title; Adjusting the outdated browser message; Setting up major structural elements; Providing a navbar markup; Compiling and linking default Bootstrap CSS; Compiling Bootstrap CSS; Completing the responsive navbar; Troubleshooting; Adding support for Internet Explorer 8; Summary; Chapter 2: Bootstrappin' Your Portfolio; What we'll build; Surveying the exercise files; Marking up the carousel; Creating responsive columns; Turning links into buttons; Understanding the power of LESS; Nested rules; Variables; Mixins; Operations; Importing files.
- The modular file organizationCustomizing Bootstrap's LESS according to our needs; Customizing variables; Importing our new variables; Editing navbar variables; Adding the logo image; Adjusting nav item padding; Adding icons; Adding Font Awesome icons; Adjusting the navbar icon color; Adjusting the responsive navbar breakpoint; Styling the carousel; Setting Font Awesome icons for the controls; Adding top and bottom padding; Forcing images to their full width; Constraining the carousel height; Repositioning the carousel indicators; Styling the indicators; Tweaking the columns and their content.
- Styling the footerRecommended next steps; Summary; Chapter 3: Bootstrappin' a WordPress Theme; Downloading and renaming the Roots theme; Installing the theme; Configuring the navbar; Bringing in our home page content; Adding images; Customizing a page template; Understanding the Roots base template; Creating a custom base template; Using custom fields for a custom structure; Creating a custom content template; Building our carousel from custom fields; Adding our content columns from custom fields; Putting the footer content in place; Surveying the Roots assets folder; Swapping design assets.
- Connecting our stylesheetConnecting our JavaScript files; Adding logo images to the navbar and footer; Adding icon links; Adding back WordPress-specific styles; Summary; Chapter 4: Bootstrappin' Business; Sizing up our beginning files; Creating a complex banner area; Placing a logo above the navbar; Reviewing and checking navbar dropdown items; Adding utility navigation; Making responsive adjustments; Implementing the color scheme; Styling the collapsed navbar; Designing a complex responsive layout; Adjusting the medium and wide layout; Adjusting headings, font sizes, and buttons.