Bootstrap Reference Guide Web Development with Bootstrap (Claudia Alves, Alexander Aronowitz) (z-library.sk, 1lib.sk, z-lib.sk)

📄 File Format: PDF

💾 File Size: 1.2 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

Bootstrap Reference Guide Web Development with Bootstrap 2nd edition 2020 By Claudia Alves

📄 Page 3

"Programming isn't about what you know; it's about what you can figure out.” - Chris Pine

📄 Page 4

Memlnc.com

📄 Page 5

INTRODUCTION_________________________________ WHAT IS BOOTSTRAP? BOOTSTRAP FEATURES CREATE AN HTML PAGE LOAD BOOTSTRAP VIA CDN HOST BOOTSTRAP LOCALLY LOAD BOOTSTRAP JAVASCRIPT PUT IT ALL TOGETHER CHAPTER 1_____________________________________ DESIGNING WITH GRID ________________________ PREPARING THE PAGE HTML5 DOCTYPE IS REQUIRED THE MOBILE IS THE MOST IMPORTANT RESPONSIVE IMAGES TYPOGRAPHY AND LINKS STYLE NORMALIZATION CENTERING THE CONTENTS OF THE PAGE INTRODUCTION NOTE MEDIA QUERIES EXAMPLE OF GRID CREATED WITH BOOTSTRAP VARIABLE WIDTH CONTAINER EXAMPLE RESETTING COLUMNS MOVING COLUMNS NESTING COLUMNS REARRANGING THE COLUMNS LESS VARIABLES AND MIXINS VARIABLES MIXINS EXAMPLE OF USE TYPOGRAPHY HEADLINES

📄 Page 6

TEXTS TEXT DESTACADO LESS VARIABLES EMPHASIS UNIMPORTANT TEXT BOLD TEXT ALTERNATIVE LABELS CSS CLASSES CSS CLASSES TO ALIGN TEXT CSS INDICAT CLASES PARA EL TIPO DE CONTENIDO ABBREVIATIONS BASIC ABBREVIATIONS INITIALS ADDRESSES BLOCKQUOTES BLOCKQUOTE BY DEFAULT OPTIONS FOR BLOCKQUOTE ELEMENTS SHOWING THE SOURCE MODIFYING THE ALIGNMENT LISTS LIST NO ORDENADAS ORDERED LISTS LISTS WITHOUT STYLE ONLINE LISTS DEFINITION LISTS HORIZONTAL DEFINITION LISTS CSS ELEMENTS BASIC TABLES SHIELDED TABLES TABLES WITH BORDERS DYNAMIC TABLES CONDENSED TABLES SEMANTIC TABLES RESPONSIVE TABLES IMAGES FLOATING ELEMENTS

📄 Page 7

CENTERED ELEMENTS CLEANING FLOATS HIDING AND SHOWING ELEMENTS HIDDEN CONTENT REPLACING TEXT WITH IMAGES RESPONSIVE UTILITIES FORMS BASIC FORM ONLINE FORM HORIZONTAL FORMS FORM FIELDS INPUTS TEXTAREA CHECKBOXES AND RADIO BUTTONS CHECKBOXES AND RADIO BUTTONS ONLINE DROP-DOWN LISTS STATIC FORM FIELDS FORM STATES SELECTED FIELDS FIELDS DISABLED VALIDATION STATES RESIZING FORM FIELDS CHANGING HEIGHT BUTTONS DIFFERENT SIZE BUTTONS ACTIVATED BUTTONS ACTIVATING <BUTTON> ELEMENTS BUTTON LABELS CHAPTER II____________________________________ PANELS, WINDOWS MODAL, AND CAROUSEL ELEMENTS____________________________________ PANELS PAINTINGS HEADER AND FOOTER PANEL

📄 Page 8

FORMAT THE PANEL ACCORDING TO ITS CONTENTS ADD TABLES, MENUS, AND OTHER ITEMS TO THE PANEL MODAL WINDOW MODERATE WINDOW SIZES COLLAPSE SHRINK THE CONTENTS OF OTHER ELEMENTS CAROUSEL REPEATING DISPLAY TOOL CONTENTS OF THE REPEATING VIEWER TOOL CHAPTER III___________________________________ DROPDOWNS, TABS, AND NAVBARS_______________ DROP DOWNS ADD A TITLE AND COMMAS BETWEEN PARTS OF THE LIST ALIGN THE LIST TABS NAVBAR MENU BAR RESPONSIVE MENU BAR ADD OTHER ITEMS IN THE MENU BAR FIXED MOBILE MENU BAR STATIC MENU BAR MORE FORMATS AND ITEMS IN THE LIST CHAPTER IV___________________________________ THE TREE MENU_______________________________ CHAPTER V____________________________________ BUILD A SITE__________________________________ USE BOOTSTRAP WITHOUT LESS USE BOOTSTRAP WITH LESS BUILD THE PROJECT USING BOOTSTRAP COMPONENTS

📄 Page 9

BASIC FORMAT HTML STRUCTURE PAGE LAYOUT CONCLUSION CHAPTER VI___________________________________ BUILD A SITE__________________________________ LOGO NAVIGATION BAR PAGE HEADER SUBMENU SIDEBAR MAIN CONTENT STAFF SECTION TWITTER FEED SITEMAP SOCIAL ICONS COPYRIGHT TEXT .

📄 Page 10

.

📄 Page 11

Introduction Bootstrap is a front-end framework that helps you build mobile responsive websites more quickly and easily. First developed by Twitter, Bootstrap is by now used for anything from developing web applications to WordPress themes. It is also completely free, versatile, and intuitive. With Bootstrap, you can conjure complex web pages from standard HTML and customize them to your needs. Bootstrap also comes with a number of jQuery plugins that can provide additional functionality such as carousels, buttons, tooltips, and more. Last, but not least, it gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to creates that are responsive, mobile-first, and compatible with all modern browsers

📄 Page 12

What is Bootstrap? Bootstrap is a responsive HTML / CSS framework. Bootstrap contains the basic tools and elements you will need in most of your projects such as: tables, buttons, text and form tools, and secondary: heading, navigation, backgrounds, and more. Bootstrap saves designers a lot of time and effort while designing pages. All they need to know is the class names they will work with to give the appropriate formatting to their element. In addition, the Bootstrap framework makes the design fit and responsive to all different screen sizes.

📄 Page 13

Bootstrap features The advantages of the Bootstrap framework that contributed to its spread: - To preserve time and effort, the pre-designed design in this framework has all that deafness has to do is put the elements in the right place and customize them according to the purpose. - Responsive design and compatible with all browsers, this feature makes the site that you create appear conveniently for all different devices in their sizes and the same format and appearance that you put, in addition to the compatibility of CSS properties with different browsers, which means that no part of the design with the browsers, is considered This is another saving on your effort to try out the design on browsers. - Easy to use and Consistent, any person with some basics in HTML and CSS can use this framework easily, you may not have to write a single CSS code, and also provides the feature of consistent formatting in all parts of the site, working on a template prepared for this purpose will make the site consistent In the appearance of the components in particular and in the layout of the site in general. In addition, the Bootstrap framework is open source and you can view its components. .

📄 Page 14

Create an HTML page As a first step, we will create a simple HTML template as a base where we will use Bootstrap. For that, the first thing you want to do is create a folder on your computer or server for the project files. In this case, I will simply call it bootstrap. Here, create a new text file and call it index.html. Open it with a text editor of your choice (e.g. Notepad++) and then paste the code below into it. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html> Don’t forget to save your file before moving on!

📄 Page 15

Load Bootstrap via CDN As already explained, Bootstrap consists mainly of style sheets and scripts. As such, they can be loaded in the header and footer of your web page like other assets such as custom fonts. The framework offers a CDN (content delivery network) access path for that. To get Bootstrap into your page, simply paste the code below into the <head> section of your template. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384- MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> When you now save the file, any browser that opens it will automatically load the Bootstrap assets. Using the remote method is a good idea as many users will already have the framework in the cache of their browser. If that is the case, they won’t have to reload it when coming to your site, leading to faster page loading time. As a consequence, this is the recommended method for live sites. However, for experimenting and development, or if you want to be independent of an Internet connection, you can also get your own copy of Bootstrap. This is what I am doing for this tutorial because it also results in less code to post.

📄 Page 16

Host Bootstrap locally An alternative way to set up Bootstrap is to download it to your hard drive and use the files locally. You find download options in the same place as the links to the remote version. Here, be sure to get the compiled CSS and JS files. You don’t need the source files. Once you have done so, unzip the file and copy its contents into the same directory as index.html. After that, you can load the Bootstrap CSS into your project like this: <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> You will notice that this includes the file path at which to find the Bootstrap file. In your case, make sure your path corresponds to your actual setup. For example, the names of the directories might differ if you downloaded a different version of Bootstrap.

📄 Page 17

Load Bootstrap JavaScript The last step in setting up Bootstrap is to load the Bootstrap JavaScript library. These are included in the downloaded version of the framework and you also find links to remote sources in the same place as before. However, we will load it in a different place than the style sheet. Instead of the header, it goes into the page footer, right after the call for jQuery. You can call it remotely like this: <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384- ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> Or locally like so: <script src="bootstrap/js/bootstrap.min.js"></script>

📄 Page 18

Put it all together If you have followed the steps above correctly, you should end up with a file that looks like this for the remote solution: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384- MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384- ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> Alternatively, if you are hosting locally, your page template should resemble the code below: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tutorial Sample Page</title>

📄 Page 19

<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> If that is what you have and you saved your work, you are now ready to move on to the next step.

📄 Page 20

Chapter 1 Designing with grid