Lamiae
Cours gratuit Adding Bootstrap to Your Project, tutoriel Bootstrap & document PDF.
As you’ll see later when we get to the subject of things like navigation bars, it would be really easy to take this form and add it into your site-wide navigation.
Before we move on to what’s available for the individual form controls, let’s look at one more type of form: the horizontal form.
Horizontal Forms
To use the horizontal form feature, you add the form-horizontal class to your form. But, unlike the other forms you’ve seen so far, you have to do a little more work. Different collections of controls need to be wrapped in control groups and your form layout has to be structured in a specific way.
As you dig deeper into TWB, you’ll find that there are a few cases where it’s about more than just adding the correct classes to your elements. In some cases (particularly when we get to the section on components), it’s about the order in which you create your HTML elements and the actual tags you use.
We won’t worry about this too much at the moment but it is something that you need to keep at the back of your mind, as you will need to remember it later on.
Before I present you with the next code sample, I’m going to take a moment to introduce you to control groups.
Control Groups
When you create a form normally, you often don’t really give it much thought. You just add labels and input fields, and then you add the various buttons and fix up the form handlers to accept your data inputs.
If you look logically at your form from a high level however, through a user’s eyes, you will soon start to see patterns.
The labels above or next to the input fields, the collections of radio buttons, and the rows of buttons all have a separate reason for existing on the page.
If you were to draw boxes around each of these lines, you’d see that you in most cases have a one-column table.
Now, add into the mix things such as validation messages, help text, and other artifacts designed to help the end user navigate the form. Then, consider things such as ARIA compatibility hints for things like screen readers and navigation aids to help those who have impairments. All of a sudden you have a whole jumble of things that require some structure to make related things look related.
The creators of Twitter Bootstrap solved this problem with something called a control group.
A control group is nothing more than a standard <div> tag that surrounds a given row of elements in your form (similar to how a row class works in the base scaffolding). But the other classes in TWB understand and respect the meaning that this parent element has on the controls it contains. We’ll see this in better detail very soon when I cover validation states.
…….
The Story behind the Succinctly Series of Books
About the Author
Introduction
Chapter 1 What is Twitter Bootstrap?
Chapter 2 Adding Bootstrap to Your Project
Download Choices
The Individual Files
CSS
JS
IMG
The Recommended Way to Add the Files to Your Project
Chapter 3 Twitter Bootstrap Scaffolding
Making Hello World Look Better
Fluid Grids
Responsive Design
Chapter 4 Twitter Bootstrap Base CSS Classes
Lead Body Copy
Alignment and Emphasis
Abbreviations, Addresses, and Blockquotes
Lists
Tables
Chapter 5 Forms
Search Forms
Inline Forms
Horizontal Forms
Control Groups
Continuing on with the Horizontal Form
Validation States
Individual Controls Support
Extended Form Controls
Control Sizing
Chapter 6 Buttons
Icons
Button Groups
Button Dropdowns
Data What?
Chapter 7 Components
Dropdown Menus
Submenus
Navigation Components
Tabs
Pills
Navigation Lists
Navigation Bars
Creating a Responsive Navigation Bar
Label and Badge Components
Hero Units and Page Headings
Thumbnails and Media Objects
Alerts
Progress Bars
…….
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Twitter bootstrap succinctly (3,30 MO) (Cours PDF)
