Bootstrap 4 cookbook over 75 recipes to help you build elegant and responsive web applications with Bootstrap 4
Take your Bootstrap game to the next level with this practical guide About This Book Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice Build intuitive user interfaces that are mobile-ready with the latest features...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, [England] ; Mumbai, [India] :
Packt
2017.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009630505806719 |
Tabla de Contenidos:
- Cover
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Customer Feedback
- Table of Contents
- Preface
- Chapter 1: Installing Bootstrap 4 and Comparing Its Versions
- Introduction
- Installing Bootstrap 4 to Cloud9 IDE using npm
- Getting ready
- How to do it...
- Installing Bootstrap 4 to Cloud9 IDE via Git
- Getting ready
- How to do it...
- Installing Bootstrap 4 Jekyll-powered docs
- Getting ready
- How to do it...
- Customizing the styles of Bootstrap 4 docs
- Getting ready
- How to do it...
- Making custom Grunt tasks in Bootstrap 4
- Getting ready
- How to do it...
- How it works...
- Comparing Bootstrap 4 versions with Bower
- Getting ready
- How to do it...
- Installing Bootstrap 4 to our Cloud9 IDE with Bower
- Getting ready
- How to do it...
- Chapter 2: Layout Like a Boss with the Grid System
- Introduction
- Preparing a static server with Bootstrap 4, Harp, and Grunt
- Getting ready
- How to do it...
- Deploying your web project with Surge
- Getting ready
- How to do it...
- Splitting up our Harp project into partials
- How to do it...
- Using containers with margin and padding utility classes
- Getting ready
- How to do it...
- How it works...
- Explanation of the data-* HTML5 attributes
- There's more...
- Renaming main.scss
- Adding columns in a row
- Getting ready
- How to do it...
- Making col-* classes work
- Getting ready
- How to do it...
- Building a simple page with the default grid
- Getting ready
- How to do it...
- How it works...
- Building a real-life web page example with the default grid
- Getting ready
- How to do it...
- How it works...
- Chapter 3: Power Up with the Media Object, Text, Images, and Tables
- Introduction
- Extending the text classes of .display-* and adding hover effects with Hover.css.
- Getting ready
- How to do it...
- How it works...
- Creating comment sections using media objects
- Getting ready
- How to do it...
- How it works...
- Enriching text content with Bootstrap typography classes
- Getting ready
- How to do it...
- How it works...
- Customizing the blockquote element with CSS
- Getting ready
- How to do it...
- How it works...
- Extending the blockquote styles with Sass
- Getting ready
- How to do it...
- How it works...
- Aligning text around images
- Getting ready
- How to do it...
- How it works...
- Wrapping text around rounded images
- Getting ready
- How to do it...
- How it works...
- Styling a pricing section using Bootstrap's default table classes
- Getting ready
- How to do it...
- How it works...
- Chapter 4: Diving Deep into Bootstrap 4 Components
- Creating custom alerts and positioning them in the viewport
- Getting ready
- How to do it…
- How it works…
- Making full-page modals
- Getting ready
- How to do it…
- How it works…
- Altering the behavior of popups using tether options
- Getting ready
- How to do it…
- How it works…
- Controlling the color and opacity of ToolTips using Sass variables
- Getting ready
- How to do it…
- How it works…
- Using Bootstrap's Sass mixins to create custom buttons
- Getting ready
- How to do it…
- How it works…
- Adjusting the rounding of corners on buttons and button groups
- Getting ready
- How to do it…
- How it works…
- Controlling the number of card columns on different breakpoints with SCSS
- Getting ready
- How to do it…
- How it works…
- Making cards responsive
- Getting ready
- How to do it…
- How it works…
- Easily positioning inline forms
- Getting ready
- How to do it…
- How it works…
- Chapter 5: Menus and Navigations
- Adding Font Awesome to Bootstrap navbar
- Getting ready
- How to do it….
- How it works…
- Placing a single Bootstrap navbar dropdown to the right
- Getting ready
- How to do it…
- How it works…
- Centering navbar links
- Getting ready
- How to do it…
- How it works…
- Making a transparent navbar on a darker background
- Getting ready
- How to do it…
- How it works…
- Creating a Navbar with Icons and Flexbox
- Getting ready
- How to do it…
- How it works…
- Adding another row of links to the navbar
- Getting ready
- How to do it…
- How it works…
- Adding Yamm3 Megamenu images to a navbar dropdown
- Getting ready
- How to do it…
- How it works…
- Adding Yamm3 Megamenu list of links to a navbar dropdown
- Getting ready
- How to do it…
- How it works…
- Chapter 6: Extending Bootstrap 4
- Introduction
- Converting checkboxes into Toggles with Bootstrap Toggle plugin
- Getting ready
- How to do it…
- How it works…
- Onboarding users with Shepherd
- Getting ready
- How to do it…
- Toggling visibility of password fields with custom jQuery code
- Getting ready
- How to do it…
- How it works…
- Extending the functionality of select elements with Bootstrap Select plugin
- How to do it…
- How it works…
- Customizing select boxes with Select2 plugin
- Getting ready
- How to do it…
- How it works…
- Adding input sliders with Rangeslider.js
- Getting ready
- How to do it…
- Allowing users to easily add dates to your input fields with jQuery UI Datepicker
- How to do it…
- Converting plain tables into sophisticated data tables with Bootgrid
- Getting ready
- How to do it…
- How it works…
- Navigating easily with simple-sidebar jQuery plugin
- Getting ready
- How to do it…
- How it works…
- Adding fully customizable notifications with Notify.js
- Getting ready
- How to do it…
- How it works…
- Integrating a fancy modal using animatedModal.js
- Getting ready
- How to do it….
- How it works…
- Making pagination dynamic with the jQuery Pagination plugin and simplePagination.js
- Getting ready
- How to do it…
- How it works…
- Validating forms with svalidate.js
- Getting ready
- How to do it…
- How it works…
- Adding a rating system using jQuery Bar Rating plugin
- Getting ready
- How to do it…
- How it works…
- Chapter 7: Make Your Own jQuery Plugins in Bootstrap 4
- Introduction
- Making the simplest possible jQuery plugin
- Getting ready
- How to do it…
- How it works…
- Making the plugin customizable with the extend() and each() methods
- Getting ready
- How to do it…
- How it works…
- Integrating a simple CSS Class Replacement plugin with Bootstrap 4
- Getting ready
- How to do it…
- How it works…
- Chapter 8: Bootstrap 4 Flexbox and Layouts
- Introduction
- Breakpoint-dependent switching of flex direction on card components
- Getting ready
- How to do it…
- How it works…
- Letting cards take up space with the .flex-wrap and .col classes
- Getting ready
- How to do it…
- How it works…
- Adding any number of columns with Flexbox
- Getting ready
- How to do it…
- How it works…
- Combining numbered .col classes with plain .col classes
- Getting ready
- How to do it…
- How it works…
- Working with card layouts and the Flexbox grid
- Getting ready
- How to do it…
- How it works…
- Center-aligning cards on wider viewports only
- Getting ready
- How to do it…
- How it works…
- Positioning nav-tabs with Flexbox
- Getting ready
- How to do it…
- How it works…
- Chapter 9: Workflow Boosters
- Introduction
- Customizing Bootstrap builds by cherry-picking Sass partials
- Getting ready
- How to do it...
- How it works...
- Cleaning up unused CSS with UnCSS and Grunt
- Getting ready
- How to do it...
- How it works.
- Removing CSS comments with the grunt-strip-CSS-comments plugin
- Getting ready
- How to do it...
- How it works...
- Chapter 10: Creating a Blog with Jekyll and Bootstrap 4
- Making Jekyll work with Bootstrap 4
- Getting ready
- How to do it...
- How it works...
- Splitting Jekyll files into partials
- Getting ready
- How to do it...
- How it works...
- Making Jekyll blog-aware
- Getting ready
- How to do it...
- How it works...
- Deploying your blog to the web with GitHub
- Getting ready
- How to do it...
- How it works...
- Chapter 11: Bootstrap 4 with ASP.NET Core
- Starting a project in ASP.NET Core and Bootstrap 4 in Visual Studio 2017
- Getting ready
- How to do it...
- How it works...
- Migrating the default web page of a .NET Core project from Bootstrap 3 to Bootstrap 4
- Getting ready
- How to do it...
- How it works...
- Working with Bower, Sass, and Grunt in our .NET Core project
- Getting ready
- How to do it...
- How it works...
- Chapter 12: Integrating Bootstrap 4 with React and Angular
- Introduction
- Integrating Bootstrap 4 with React
- Getting ready
- How to do it...
- How it works...
- Replacing the Default Styles in Angular 2 QuickStart with Bootstrap 4 CDN CSS
- Getting ready
- How to do it...
- How it works...
- Integrating Angular 4 and Bootstrap 4 with the help of ng-bootstrap
- Getting ready
- How to do it...
- How it works...
- Conclusion
- Next Steps
- Index.
