` that has a class of `.row` and add the appropriate amount of `.span*` columns. Since we have a 12-column grid, we just need the amount of `.span*` columns to equal 12. We could use a 3-6-3 layout, 4-8, 3-5-4, 2-8-2... we could go on and on, but I think you get the gist.(((layouts, creating simple)))
127 |
128 | The following code shows `.span8` and `.span4`, which adds up to 12:
129 |
130 | [source, html]
131 | ----
132 |
133 | >)(((columns, offsetting)))(((offset grids))):
149 |
150 | [source, html]
151 | ----
152 | >)(((columns, nesting)))(((nesting grids))):
165 |
166 | // Could be a good place for a challenge/solution. "Given a parent span9, what values could you use in the child row?". Prepopulate the box with everything but the child span*'s, and then the pop-out solution would show the following code. -NM
167 |
168 | //So, let's say that you have a two columns layout, with a span8, and a span4, and you want to embed a two column layout inside of the layout, what spans would you use? For a four column layout?
169 |
170 | // Nellie, what is the format for somthing like this? Just a normal paragraph?
171 |
172 | // Here's an example I pulled from another book. If you build the HTML and view it, you can see how it works. It may not be totally perfect, but I think it works alright. Let me know if you envision something else, though, and I can see how tricky it would be to implement. -NM
173 |
174 | // This looks good. The main problem with Chimera is that it doesn't look like Bootstrap... If we could patch that in, it would be awesome... -JS
175 |
176 | // ==== Excercise 1
177 |
178 |
179 | // Create a table that looks like this:
180 |
181 | // .ORM Employees
182 | // [options="header"]
183 | // |=======================
184 | // |First|Last
185 | // |Sanders|Kleinfeld
186 | // |Karen|Tripp
187 | // |Adam|Zaremba
188 | // |=======================
189 |
190 | //Write your solution here:
191 |
192 | // [condition="editable"]
193 | //[source, asciidoc]
194 | // ----
195 | // First Last
196 | // Sanders Kleinfeld
197 | // Karen Tripp
198 | // Adam Zaremba
199 | // ----
200 |
201 |
202 | // [role="solution"]
203 | // .Solution
204 | // ****
205 | // Your markup should look something like this:
206 |
207 | // ----
208 | // .ORM Employees
209 | // [options="header"]
210 | // |=======================
211 | // |First | Last
212 | // |Sanders | Kleinfeld
213 | // |Karen | Tripp
214 | // |Adam | Zaremba
215 | // |=======================
216 | // ----
217 |
218 | // ****
219 |
220 |
221 | [source, html]
222 | ----
223 | >). This is the case for responsive content, as we want the content to fill 100% of the container:
264 |
265 |
266 | [source, html]
267 | ----
268 | My amazing Bootstrap site!
302 |
304 |
305 |
306 |
307 | ----
308 |
309 | [WARNING]
310 | ===============================
311 | If you get started and find that the Bootstrap responsive features aren't working, make sure that you have these tags. The responsive features aren't added by default at this time because not everything needs to be responsive. Instead of encouraging developers to remove this feature, the authors of Bootstrap decided that it was best to enable it as needed.
312 | ===============================
313 |
314 | // "Not everything needs to be responsive" - that's crazy talk! -NM
315 | // Yeah, come talk to us at MAKE... -JS
316 |
317 | ==== What Is Responsive Design?
318 |
319 | Responsive design is a method for taking all of the existing content that is on the page and optimizing it for the device that is viewing it. For example, the desktop not only gets the normal version of the website, but it might also get a widescreen layout, optimized for the larger displays that many people have attached to their computers. Tablets get an optimized layout, taking advantage of their portrait or landscape layouts. And then with phones, you can target their much narrower width. To target these different widths, Bootstrap uses CSS media queries to measure the width of the browser viewport and then, using conditionals, changes which parts of the stylesheets are loaded. Using the width of the browser viewport, Bootstrap can then optimize the content using a combination of ratios or widths, but it mostly relies on 'min-width' and 'max-width' properties.(((scaffolding, responsive design)))(((responsive design, definition of)))((("web development, responsive framework for")))(((media queries)))((("CSS (Cascading Style Sheets)", "media queries")))(((layouts, optimized by device)))
320 |
321 | // maybe include some examples of a website that is responsive, and how it displays at various sizes/on different devices. -NM
322 |
323 | At the core, Bootstrap supports five different layouts, each relying on CSS media queries. The largest layout has columns that are 70 pixels wide, contrasting with the 60 pixels of the normal layout. The tablet layout brings the columns to 42 pixels wide, and when narrower than that, each column goes fluid, meaning the columns are stacked vertically and each column is the full width of the device (see <>).(((layouts, supported in Bootstrap)))
324 |
325 | [[table1-1]]
326 | .Responsive media queries
327 | [options="header"]
328 | |=====================================================================
329 | |Label |Layout width |Column width |Gutter width
330 | |Large display |1200px and up |70px |30px
331 | |Default |980px and up |60px |20px
332 | |Portrait tablets |768px and up |42px |20px
333 | |Phones to tablets |767px and below 2+^|Fluid columns, no fixed widths
334 | |Phones |480px and below 2+^|Fluid columns, no fixed widths
335 | |=====================================================================
336 |
337 | To add custom CSS based on the media query, you can either include all rules in one CSS file via the media queries below, or use entirely different CSS files((("CSS (Cascading Style Sheets)", "customized layouts"))):
338 |
339 | [source, css]
340 | --------------
341 | /* Large desktop */
342 | @media (min-width: 1200px) { ... }
343 |
344 | /* Portrait tablet to landscape and desktop */
345 | @media (min-width: 768px) and (max-width: 979px) { ... }
346 |
347 | /* Landscape phone to portrait tablet */
348 | @media (max-width: 767px) { ... }
349 |
350 | /* Landscape phones and down */
351 | @media (max-width: 480px) { ... }
352 | --------------
353 |
354 | For a larger site, you might want to divide each media query into a seperate CSS file. In the HTML file, you can call them with the `` tag in the head of your document. This is useful for keeping file sizes smaller, but it does potentially increase the HTTP requests if the site is responsive. If you are using LESS to compile the CSS, you can have them all processed into one file:
355 |
356 | // maybe just spell out that last sentence a bit more, like "this means the server has to serve more files, which could make the response time slower" or something. -NM
357 |
358 | [source, html]
359 | ----
360 |
361 |
362 |
364 |
365 |
366 | ----
367 |
368 |
369 | ===== Helper classes
370 |
371 | Bootstrap also includes a handful of helper classes for doing responsive development (see <>). Use these sparingly. A couple of use cases that I have seen involve loading custom elements based on certain layouts. Perhaps you have a really nice header on the main layout, but on mobile you want to pare it down, leaving only a few of the elements. In this scenario, you could use the `.hidden-phone` class to hide either parts or entire dom elements from the header.(((scaffolding, helper classes)))(((helper classes)))(((responsive design, helper classes for)))(((media queries)))
372 |
373 | [[table1-2]]
374 | .Media queries helper classes
375 | [options="header"]
376 | |===========================================
377 | |Class |Phones |Tablets |Desktops
378 | |.visible-phone |Visible |Hidden |Hidden
379 | |.visible-tablet |Hidden |Visible |Hidden
380 | |.visible-desktop|Hidden |Hidden |Visible
381 | |.hidden-phone |Hidden |Visible |Visible
382 | |.hidden-tablet |Visible |Hidden |Visible
383 | |.hidden-desktop |Visible |Visible |Hidden
384 | |===========================================
385 |
386 | // I'd really love to see a slideshow here, where you see which class is being used, and then see the display on different devices. I envision this showing alongside the text. But I'm not totally sure if that's even feasible right now; a video with the same content could also work. I wouldn't even say narrative was necessary. Or maybe an animated gif? -NM
387 |
388 | There are two major ways that you could look at doing development. The mantra that a lot of people are shouting now is that you should start with mobile, build to that platform, and let the desktop follow. Bootstrap almost forces the opposite, where you would create a full-featured desktop site that "just works."(((mobile frameworks)))
389 |
390 | If you are looking for a strictly mobile framework, Bootstrap is still a great resource.(((range="endofrange", startref="ix_bootscaff")))
391 |
392 | // Just a test...
--------------------------------------------------------------------------------
/ch04.asciidoc:
--------------------------------------------------------------------------------
1 | [[javascriptplug]]
2 |
3 | == Bootstrap JavaScript Plugins
4 |
5 | The components discussed in <> are just the beginning. Bootstrap comes bundled with 13 jQuery plugins that extend the features and can add more interaction to your site. To get started with Bootstrap's JavaScript plugins, you don't need to be an advanced JavaScript developer. In fact, by utilizing Bootstrap Data API, most of the plugins can be triggered without writing a single line of code.(((Bootstrap, jQuery plugins included in)))(((Bootstrap Data API)))((("plugins", seealso="JavaScript plugins")))
6 |
7 | === Overview
8 |
9 | Bootstrap can be included on your site in two forms, either compiled or raw. In Bootstrap 2.2.2, the uncompressed file is 59KB and the minimized version is only 32KB. All of the Bootstrap plugins are accessible using the included Data API. With this, you don't need to include a single line of JavaScript to invoke any of the plugin features.((("JavaScript plugins", id="ix_jsplug", range="startofrange")))(((JavaScript plugins, usage)))
10 |
11 | Typically, JavaScript lies in a either a separate file or at the bottom of the page before the closing `` tag. You can either use the `src` attribute to link to another file, or you can write the contents of the file between the opening and closing tags:
12 |
13 | [source, html]
14 | ----
15 |
16 |
17 |
18 |
19 |
24 | ----
25 |
26 | Generally, it is best to include all JavaScript calls into a check that ensures that the DOM has been loaded on the page. If you have the JavaScript trying to fire earlier, it may miss elements as the browser parses the page. With jQuery, adding a check is easily done by selecting the `document` or the entire content of the page, and then applying the `.ready()` method:
27 |
28 | [source, js]
29 | ----
30 | $(document).ready(function(){
31 | alert('Page has loaded');
32 | // Once the page has loaded and is ready, an alert will fire.
33 | });
34 | ----
35 |
36 | As mentioned above, Bootstrap has a Data API where you can write data attributes into the HTML of the page. If you need to turn off the Data API, you can unbind the attributes by adding the following line of JavaScript:
37 |
38 | [source, js]
39 | ----
40 | $('body').off('.data-api')
41 | ----
42 |
43 | If you need to disable a single plugin, you can do it programmatically using the namespace of the plugin along with the `data-api` namespace(((JavaScript plugins, disabling))):
44 |
45 | [source, js]
46 | ----
47 | $('body').off('.alert.data-api')
48 | ----
49 |
50 | ==== Programmatic API
51 |
52 | The developers of Bootstrap believe that you should be able to use all of the plugins throughout the JavaScript API. All public APIs are single, chainable methods and return the collection acted upon.(((JavaScript plugins, programmatic API)))(((programmatic API)))
53 |
54 | [source, js]
55 | ----
56 | $('.btn.danger').button('toggle').addClass('active')
57 | ----
58 |
59 | All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior).
60 |
61 | [source, js]
62 | ----
63 | $("#myModal").modal() // initialized with defaults
64 | $("#myModal").modal({ keyboard: false }) // initialized with no keyboard
65 | $("#myModal").modal('show') // initializes and invokes show immediately
66 | ----
67 |
68 | === Transitions
69 |
70 | The transition plugin provides simple transition effects. A few examples include(((JavaScript plugins, transitions)))(((transitions)))(((fades)))(((carousel panes))):
71 |
72 | * Sliding or fading in modals
73 | * Fading out tabs
74 | * Fading out alerts
75 | * Sliding carousel panes
76 |
77 | === Modal
78 |
79 | A modal is a child window that is layered over its parent window (see <>). Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more. I use them as a window for holding slideshows and login/registration information. The modal plugin is probably one of my favorite Bootstrap features.(((JavaScript plugins, modal windows)))(((modal windows)))((("windows, layered")))(((layered windows)))(((child windows)))(((parent windows)))(((slideshows)))(((login/registration information)))
80 |
81 | To create a static modal window, use this code:
82 |
83 | [source, html]
84 | ----
85 |
99 | ----
100 |
101 | [[figure4_1]]
102 | .Static modal window
103 | image::images/boot_0401.png[]
104 |
105 | To invoke the modal window, you need to have some kind of a trigger. Normally I use a button or a link. If you look in the code below, you will see that in the `` tag, the `href="myModal"` is the target of the modal that you want to load on the page. This code allows you to create multiple modals on the page and then have different triggers for each of them. Now, to be clear, you don't load multiple modals at the same time, but you can create many on the page to be loaded at different times.
106 |
107 | There are three classes to take note of in the modal. The first is `.modal`, which is simply identifying the content of the `
134 |
137 | ----
138 |
139 | // I'm not sure if this is feasible yet, but it would be cool to have an interactive frame where readers could try different combinations of span numbers and see the effect. Maybe even just a very short video where you walk through a few different combinations, showing the code as well, with a fallback image that compares a few combinations side by side. -NM
140 |
141 | // Starting work on this.
142 |
143 | // jsfiddle::http://jsfiddle.net/whyisjake/b3X7n/embedded/result/[width="100%", height="300px"]
144 |
145 |
146 | ==== Offsetting Columns
147 |
148 | You can move columns to the right using the `.offset*` class. Each class moves the span over that width. So an `.offset2` would move a `.span7` over two columns (see <...
135 | ...
136 |
153 |
156 | ----
157 |
158 | [[figure1-2]]
159 | .Offset grid
160 | image::images/boot_0102.png[]
161 |
162 | ==== Nesting Columns
163 |
164 | To nest your content with the default grid, inside of a `.span*`, simply add a new `.row` with enough `.span*` that it equals the number of spans of the parent container (see <...
154 | ...
155 |
224 |
232 | ----
233 |
234 | [[figure1-3]]
235 | .Nesting grid
236 | image::images/boot_0103.png[]
237 |
238 | // jsfiddle::http://jsfiddle.net/whyisjake/EEWQ2/embedded/result/[width="100%", height="300px"]
239 |
240 |
241 | === Fluid Grid System
242 |
243 | The fluid grid system uses percentages instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. You can make any row "fluid" by changing `.row` to `.row-fluid`. The column classes stay exactly the same, making it easy to flip between fixed and fluid grids. To offset, you operate in the same way as the fixed grid system—add `.offset*` to any column to shift by your desired number of columns(((fluid grid systems)))(((scaffolding, fluid grid systems))):
244 |
245 | // I'd love to see some kind of demo of how changing from fixed to fluid changes the display of the website. Could be a video or a couple of jsfiddles. -NM
246 |
247 | //jsfiddle::http://jsfiddle.net/whyisjake/327R3/embedded/result/[width="100%", height="600px"]
248 |
249 |
250 | [source, html]
251 | ----
252 |
225 | Level 1 of column
226 |
231 |
227 |
230 | Level 2
228 | Level 2
229 |
253 |
256 |
257 | ...
254 | ...
255 |
258 |
261 | ----
262 |
263 | Nesting a fluid grid is a little different. Since we are using percentages, each `.row` resets the column count to 12. For example, if you were inside a `.span8`, instead of two `.span4` elements to divide the content in half, you would use two `.span6` divs (see <...
259 | ...
260 |
269 |
276 | ----
277 |
278 | [[figure1-4]]
279 | .Nesting fluid grid
280 | image::images/responsive-grid.png[]
281 |
282 | // This is a little confusing. Some kind of demo or expanded explanation would be cool, but I'm not sure what just yet. Or maybe just a note about how it's kind of confusing to use the same span number scheme while working with percentages ("span6" = 50% of the parent, or something). -NM
283 |
284 | === Container Layouts
285 |
286 | To add a fixed-width, centered layout to your page, simply wrap the content in `
270 |
275 |
271 |
274 | ...
272 | ...
273 | ...
`. If you would like to use a fluid layout but want to wrap everything in a container, use the following: `...
`. Using a fluid layout is great when you are building applications, administration screens, and other related projects.(((scaffolding, container layouts)))((("containers, layouts for")))
287 |
288 | // So the only thing the container adds is centering? Any other benefits worth talking about? (or if you mention any later in the book, you could also just add a cross reference.) If not, I might rename this section "centered layouts", since that's really the essence of the content. -NM
289 |
290 | === Responsive Design
291 |
292 | To turn on the responsive features of Bootstrap, you need to add a `` tag to the `` of your web page. If you haven't downloaded the compiled source, you will also need to add the responsive CSS file. An example of required files looks like this(((scaffolding, responsive design)))(((responsive design, enabling in Bootstrap)))(((Bootstrap, enabling responsive features)))(((meta tags)))((("CSS (Cascading Style Sheets)", "responsive CSS file"))):
293 |
294 | // I might add the complete head markup in the example below, just to give people a little extra orientation. Also, why wouldn't they have downloaded the compiled source, and how do they add the CSS file in that case? -NM
295 |
296 | [source, html]
297 | ----
298 |
299 |
300 |
301 | ` as a modal. The second is `.hide`, which tells the browser to hide the content of the `
` until we are ready to invoke it. And last, the `.fade` class. When the modal is toggled, it will cause the content to fade in and out.
108 |
109 | [source, html]
110 | ----
111 |
112 | Launch demo
113 | modal
114 |
115 |
116 |
132 | ----
133 |
134 | ==== Usage
135 |
136 | Using the Bootstrap JavaScript Data API, you simply need to pass a few data attributes to toggle the slideshow. To start with, set `data-toggle="modal"` on the link or button that you want to use to invoke the modal and then set the `data-target="#foo"` to the ID of the modal that you'd like to use.
137 |
138 | To call a modal with `id="myModal"`, use a single line of JavaScript:
139 |
140 | [source, js]
141 | ----
142 | $('#myModal').modal(options)
143 | ----
144 |
145 | ==== Options
146 |
147 | Options can either be passed in via data attributes or with JavaScript. To use the data attributes, prepend `data-` to the option name (e.g., `data-backdrop=""`). See <> for descriptions of some modal options.
148 |
149 | [[table1]]
150 | .Modal options
151 | [options="header"]
152 | |=======================
153 | |Name |Type |Default |Description
154 | |backdrop |Boolean |true |Set to false if you don't want the modal to be closed when the user clicks outside of the modal.
155 | |keyboard |Boolean |true |Closes the modal when escape key is pressed; set to false to disable.
156 | |show |Boolean |true |Shows the modal when initialized.
157 | |remote |path |false |Using the jQuery `.load` method, inject content into the modal body. If an `href` with a valid URL is added, it will load that content.
158 | |=======================
159 |
160 |
161 | ==== Methods
162 | The following are some useful methods to use with modals.
163 |
164 | ===== Options
165 | Activates your content as a modal. Accepts an optional options object.
166 |
167 | .+.modal(options)+
168 | [source, js]
169 | ----
170 | $('#myModal').modal({
171 | keyboard: false
172 | })
173 | ----
174 |
175 | ===== Toggle
176 | Manually toggles a modal.
177 |
178 | .+.modal(\'toggle')+
179 | [source, js]
180 | ----
181 | $('#myModal').modal('toggle')
182 | ----
183 |
184 | ===== Show
185 | Manually opens a modal.
186 |
187 | .+.modal(\'show')+
188 | [source, js]
189 | ----
190 | $('#myModal').modal('show')
191 | ----
192 |
193 | ===== Hide
194 | Manually hides a modal.
195 |
196 | .+.modal(\'hide')+
197 | [source, js]
198 | ----
199 | $('#myModal').modal('hide')
200 | ----
201 |
202 | ==== Events
203 |
204 | Bootstrap provides the events listed in <> if you need to hook into the function.
205 |
206 | [[table_modal_events]]
207 | .Modal events
208 | [options="header"]
209 | |=======================
210 | |Event |Description
211 | |show |Fired after the `show` method is called.
212 | |shown |Fired when the modal has been made visible to the user.
213 | |hide |Fired when the `hide` instance method has been called.
214 | |hidden |Fired when the modal has finished being hidden from the user.
215 | |=======================
216 |
217 | ++++
218 |
219 | ++++
220 |
221 | As an example, after the modal is hidden, you could cause an alert to fire:
222 |
223 | [source, js]
224 | ----
225 | $('#myModal').on('hidden', function () {
226 | alert('Hey girl, I heard you like modals...');
227 | })
228 | ----
229 |
230 |
231 | === Dropdown
232 |
233 | The dropdown was covered extensively in <>, but the interaction was glossed over. As a refresher, dropdowns can be added to the navbar, pills, tabs, and buttons.(((JavaScript plugins, dropdowns)))(((dropdown menus)))(((menus, dropdown)))(((buttons, with dropdowns)))(((navbars)))(((pills navigation)))(((tabbable navigation)))
234 |
235 | ==== Usage
236 |
237 | To use a dropdown (<>), add `data-toggle="dropdown"` to a link or button to toggle the dropdown.(((data attributes)))(((data-target attribute)))
238 |
239 | [[dropdown_fig]]
240 | .Dropdown within navbar
241 | image::images/boot_0402.png[]
242 |
243 | Here's the code for developing a dropdown with data attributes:
244 |
245 | [source, html]
246 | ----
247 |
248 | Word
250 |
257 |
258 | ----
259 |
260 | If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the `data-target` attribute along with `href="#"`:
261 |
262 | [source, html]
263 | ----
264 | >) allows you to target sections of the page based on scroll position. In its basic implementation, as you scroll, you can add `.active` classes to the navbar based on the scroll position. To add the Scrollspy plugin via data attributes, add `data-spy="scroll"` to the element you want to spy on (typically the body) and `data-target=".navbar"` to the navbar that you want to apply the class changes to. For this to work, you must have elements in the body of the page that have matching IDs of the links that you are spying on.(((JavaScript plugins, scroll position targeting)))(((Scrollspy plugin)))
298 |
299 | [[scrollspy_fig]]
300 | .Scrollspy example
301 | image::images/boot_04in01.png[]
302 |
303 | ==== Usage
304 |
305 | For Scrollspy, you will need to add `data-spy="scroll"` to the `` tag, along with `data-target=".navbar"` that references the element that you are spying on:
306 |
307 | [source, html]
308 | ----
309 | ...
310 | ----
311 |
312 | In the navbar, you will need to have page anchors that will serve as indicators for the element to spy on:
313 |
314 | [source, html]
315 | ----
316 |
331 | ----
332 |
333 | ===== Usage via JavaScript
334 |
335 | If you would rather invoke the scrollspy with JavaScript instead of using the data attributes, you can do so by selecting the element to spy on, and then invoking the `.scrollspy()` function:
336 |
337 | [source, js]
338 | ----
339 | $('#navbar').scrollspy()
340 | ----
341 |
342 | ==== .scrollspy(\'refresh') Method
343 |
344 | When calling the scrollspy via the JavaScript method, you need to call the +.refresh+ method to update the DOM. This is helpful if any elements of the DOM have changed.
345 |
346 | [source, js]
347 | ----
348 | $('[data-spy="scroll"]').each(function () {
349 | var $spy = $(this).scrollspy('refresh')
350 | });
351 | ----
352 |
353 | ==== Options
354 |
355 | Options can be passed via data attributes or JavaScript. For data attributes, prepend the option name to `data-`, as in `data-offset=""` (see <>).
356 |
357 | [[table4-3]]
358 | .Scrollspy option
359 | [options="header"]
360 | |=======================
361 | |Name |Type |Default |Description
362 | |offset |number |10 |Pixels to offset from top of page when calculating position of scroll.
363 | |=======================
364 |
365 | The offset option is handy when you are using a fixed navbar. You will want to offset the scroll by about 50 pixels so that it reads at the correct time (see <>).
366 |
367 | ++++
368 |
369 | ++++
370 |
371 | ==== Event
372 |
373 | [[table4-4]]
374 | .Scrollspy event
375 | [options="header"]
376 | |=======================
377 | |Event |Description
378 | |activate |This event fires whenever a new item becomes activated by the scrollspy.
379 | |=======================
380 |
381 |
382 | === Toggleable Tabs
383 |
384 | Tabbable tabs were introduced in <>. By combining a few data attributes, you can easily create a tabbed interface (<>). To do so, create the nav interface, and then wrap the content of the tabs inside a `
265 |
267 | Dropdown
268 |
269 |
270 |
273 |
274 | ----
275 |
276 | ==== Dropdown Usage via JavaScript
277 |
278 | To call the dropdown toggle via JavaScript, use the following method:
279 |
280 | [source, js]
281 | ----
282 | $('.dropdown-toggle').dropdown()
283 | ----
284 |
285 | ==== Method
286 |
287 | The dropdown toggle has a simple method to show or hide the dropdown. There are no options:
288 |
289 | [source, js]
290 | ----
291 | $().dropdown('toggle')
292 | ----
293 |
294 |
295 | === Scrollspy
296 |
297 | The Scrollspy plugin (<` with a class of `.tab-content`: (((JavaScript plugins, toggleable tabs)))(((toggleable tabs)))(((tabbed navigation)))
385 |
386 | [source, html]
387 | ----
388 |
394 |
395 | >.
433 |
434 | [[table_toggletab]]
435 | .Toggleable tab events
436 | [options="header"]
437 | |=======================
438 | |Event |Description
439 | |show |This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available), respectively.
440 | |shown |This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available), respectively.
441 | |=======================
442 |
443 | Here's a code example of a shown method:
444 |
445 | [source, js]
446 | ----
447 | $('a[data-toggle="tab"]').on('shown', function (e) {
448 | e.target // activated tab
449 | e.relatedTarget // previous tab
450 | })
451 | ----
452 |
453 | For information about the `.on` method, refer to the http://api.jquery.com/on/[jQuery website].
454 |
455 | === Tooltips
456 |
457 | Tooltips (<>) are useful when you need to describe a link or (used in conjunction with the `` tag) provide the definition of an abbreviation. The plugin was originally based on the _jQuery.tipsy_ plugin written by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and work with the Bootstrap JavaScript API.(((JavaScript plugins, tooltips)))(((tooltips)))(((links, describing)))(((abbreviations)))(((typography, abbreviations)))
458 |
459 | [[tooltip_placement]]
460 | .Tooltip placement
461 | image::images/boot_0404.png[]
462 |
463 | ==== Usage
464 |
465 | To add a tooltip, add `rel="tooltip"` to an anchor tag. The title of the anchor will be the text of a tooltip. The following two examples show how to do this in the Bootstrap Data API and JavaScript, respectively:
466 |
467 | [source, js]
468 | ----
469 | Tooltip Example
470 | ----
471 |
472 | [source, js]
473 | ----
474 | $('#example').tooltip(options)
475 | ----
476 |
477 | ==== Options
478 |
479 | Like all of the plugins, there are options that can be added via the Bootstrap Data API or invoked via JavaScript. All options need to have `data-` prepended to them. So, the `title` option would become `data-title` (see <>).
480 |
481 | [[table4-6]]
482 | .Tooltip options
483 | [options="header"]
484 | |=======================
485 | |Name |Type |Default |Description
486 | |animation |Boolean |true |Applies a CSS fade transition to the tooltip.
487 | |html |Boolean |false |Inserts HTML into the tooltip. If false, jQuery's `text` method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
488 | |placement |string/function |\'top' |Specifies how to position the tooltip (i.e., top, bottom, left, or right).
489 | |selector |string |false |If a selector is provided, tooltip objects will be delegated to the specified targets.
490 | |title |string/function |'' |The title option is the default title value if the `title` attribute isn't present.
491 | |trigger |string |\'hover' |Defines how the tooltip is triggered: click, hover, focus, or manually.
492 | |delay |number/object |0 |Delays showing and hiding the tooltip in ms--does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { show: 500, hide: 100 }`
493 | |=======================
494 |
495 |
496 | ==== Methods
497 |
498 | Here are some useful methods for tooltips.
499 |
500 | ===== Options
501 |
502 | Attaches a tooltip handler to an element collection:
503 |
504 | [source, js]
505 | ----
506 | $().tooltip(options)
507 | ----
508 |
509 |
510 | ===== Show
511 |
512 | Reveals an element's tooltip:
513 |
514 | [source, js]
515 | ----
516 | $('#element').tooltip('show')
517 | ----
518 |
519 | ===== Hide
520 |
521 | Hides an element's tooltip:
522 |
523 | [source, js]
524 | ----
525 | $('#element').tooltip('hide')
526 | ----
527 |
528 | ===== Toggle
529 |
530 | Toggles an element's tooltip:
531 |
532 | [source, js]
533 | ----
534 | $('#element').tooltip('toggle')
535 | ----
536 |
537 | ===== Destroy
538 |
539 | Hides and destroys an element's tooltip:
540 |
541 | [source, js]
542 | ----
543 | $('#element').tooltip('destroy')
544 | ----
545 |
546 | === Popover
547 |
548 | The popover (see <>) is a sibling of the tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API. This method requires a tooltip.(((JavaScript plugins, popovers)))(((popovers)))
549 |
550 | [[popover_placement]]
551 | .Popover placement
552 | image::images/boot_0405.png[width="3.85in"]
553 |
554 | Use the following code for popover placement:
555 |
556 | [source, html]
557 | ----
558 | Click Me!
560 | ----
561 |
562 |
563 | ==== Usage
564 |
565 | To enable the popover with JavaScript, use the `.popover()` function, passing in any options that you might need:
566 |
567 | [source, js]
568 | ----
569 | $('#example').popover(options)
570 | ----
571 |
572 | ==== Options
573 |
574 | All options can be passed via the Bootstrap Data API, or directly with JavaScript (see <>).
575 |
576 | [[table4-7]]
577 | .Popover options
578 | [options="header"]
579 | |===========================
580 | |Name |Type |Default|Description
581 | |animation|Boolean |true |Applies a CSS fade transition to the tooltip.
582 | |html |Boolean |false |Inserts HTML into the popover. If false, jQuery's +text+ method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
583 | |placement|string | function|'right'|Specifies how to position the popover (i.e., top, bottom, left, right)
584 | |selector |string |false |If a selector is provided, tooltip objects will be delegated to the specified targets.
585 | |trigger |string |'click'|How the popover is triggered (i.e., click, hover, focus, manual)
586 | |title |string | function|'' |Default title value if 'title' attribute isn't present
587 | |content |string | function|'' |Default content value if 'data-content' attribute isn't present
588 | |delay |number | object |0 |Delays showing and hiding the popover in ms--does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: +delay: \{show: 500, hide: 100 \}+.
589 | |===========================
590 |
591 | ==== Methods
592 |
593 | Here are some useful methods for popovers.
594 |
595 | ===== Options
596 |
597 | Initializes popovers for an element collection:
598 |
599 | [source, js]
600 | ----
601 | $().popover(options)
602 | ----
603 |
604 | ===== Show
605 |
606 | Reveals an element's popover:
607 |
608 | [source, js]
609 | ----
610 | $('#element').popover('show')
611 | ----
612 |
613 | ===== Hide
614 |
615 | Hides an element's popover:
616 |
617 | [source, js]
618 | ----
619 | $('#element').popover('hide')
620 | ----
621 |
622 | ===== Toggle
623 |
624 | Toggles an element's popover:
625 |
626 | [source, js]
627 | ----
628 | $('#element').popover('toggle')
629 | ----
630 |
631 | ===== Destroy
632 |
633 | Hides and destroys an element's popover:
634 |
635 | [source, js]
636 | ----
637 | $('#element').popover('destroy')
638 | ----
639 |
640 | === Alerts
641 |
642 | With the Data API, it is easy to add dismiss functionality to alert messages (<>).(((JavaScript plugins, alerts)))(((alerts)))(((messages)))
643 |
644 | [[error_alert]]
645 | .Error alert message
646 | image::images/boot_04in02.png[]
647 |
648 | ==== Usage
649 |
650 | You can close an alert manually with the JavaScript `.alert()` method or use data attributes in conjunction with an anchor or button.
651 |
652 | Here is how to dismiss via JavaScript:
653 |
654 | [source, js]
655 | ----
656 | $(".alert").alert()
657 | ----
658 |
659 | Here is how to dismiss via Data API:
660 |
661 | [source, js]
662 | ----
663 | ×
664 | ----
665 |
666 | ==== Close Method
667 |
668 | To enable all alerts to be closed, add the following method. To enable alerts to animate out when closed, make sure they have the `.fade` and `.in` class already applied to them.
669 |
670 | [source, js]
671 | ----
672 | $(".alert").alert('close')
673 | ----
674 |
675 | ==== Events
676 |
677 | There are two events that can be tied to Bootstrap's +alert+ class as shown in <>.
678 |
679 | [[table4-8]]
680 | .Alert class events
681 | [options="header"]
682 | |=======================
683 | |Event |Description
684 | |close |This event fires immediately when the close instance method is called.
685 | |closed |This event is fired when the alert has been closed (will wait for CSS transitions to complete).
686 | |=======================
687 |
688 | As an example, if you wanted to trigger a function after an alert has closed, you could use this function:
689 |
690 | [source, js]
691 | ----
692 | $('#my-alert').bind('closed', function () {
693 | // do something…
694 | })
695 | ----
696 |
697 | === Buttons
698 |
699 | Buttons were introduced in <>. With Bootstrap, you don't need to do anything to make them work as links or as buttons in forms. With this plugin you can add in some interaction, such as loading states or button groups with toolbar-like functionality.(((JavaScript plugins, buttons)))(((buttons, interactive)))(((loading states)))
700 |
701 | ==== Loading State
702 |
703 | To add a loading state to a button (shown in <>), simply add `data-loading-text="Loading..."` as an attribute to the button:
704 |
705 | [source, html]
706 | ----
707 |
709 | ----
710 |
711 | When the button is clicked, the `.disabled` class is added, giving the appearance that it can no longer be clicked.
712 |
713 | [[loading_button_fig]]
714 | .Loading button
715 | image::images/boot_0406.png[]
716 |
717 | ==== Single Toggle
718 |
719 | When clicking on a button with the `data-toggle="button"` attribute (<>), a class of `.active` is added:
720 |
721 | [source, html]
722 | ----
723 |
725 | ----
726 |
727 | [[toggle_button]]
728 | .Toggle button
729 | image::images/boot_0407.png[]
730 |
731 | ==== Checkbox Buttons
732 |
733 | Buttons can work like checkboxes (as in <>), allowing a user to select many of the options in a button group. To add this function, add `data-toggle="buttons-checkbox"` for checkbox style toggling on `.btn-group`: (((checkboxes)))
734 |
735 | [source, html]
736 | ----
737 | >) function similarily to checkboxes. The primary difference is that a radio button doesn't allow for multiple selections--only one button in the group can be selected. To add radio-style toggling on `btn-group`, add `data-toggle="buttons-radio"`: (((radio buttons)))(((buttons, radio buttons)))
751 |
752 | [source, html]
753 | ----
754 | >). Whether you use it to build accordion navigation or content boxes, it allows for a lot of content options. (((JavaScript plugins, collapse)))(((collapsing page divisions)))(((accordion navigation)))
829 |
830 | [[accordionfig]]
831 | .Accordion
832 | image::images/boot_0410.png[]
833 |
834 | The following code creates collapsible groups:
835 |
836 | [source, html]
837 | ----
838 | > can be passed via data attributes or with JavaScript.
901 |
902 | [[collapse_table]]
903 | .Collapse options
904 | [options="header"]
905 | |=======================
906 | |Name |Type |Default |Description
907 | |parent |selector |false |If selector, then all collapsible elements under the specified parent will be closed when pass:[this collapsible item is shown. (Similar to traditional accordion behavior.) ]
908 | |toggle |Boolean |true |Toggles the collapsible element on invocation.
909 | |=======================
910 |
911 | ==== Methods
912 |
913 | The following methods are useful to use with collapsible elements.
914 |
915 | ===== Options
916 |
917 | Activates your content as a collapsible element. Accepts an optional options object:
918 |
919 | [source, js]
920 | ----
921 | .collapse(options)
922 | ----
923 |
924 | ===== Toggle
925 |
926 | Toggles a collapsible element to shown or hidden:
927 |
928 | [source, js]
929 | ----
930 | $('#myCollapsible').collapse({
931 | toggle: false
932 | })
933 | .collapse('toggle')
934 | ----
935 |
936 | ===== Show
937 |
938 | Shows a collapsible element:
939 |
940 | [source, js]
941 | ----
942 | .collapse('show')
943 | ----
944 |
945 | ===== Hide
946 |
947 | Hides a collapsible element:
948 |
949 | [source, js]
950 | ----
951 | .collapse('hide')
952 | ----
953 |
954 | ==== Events
955 |
956 | There are four events that can be hooked into with the collapse plugin, described in <>.
957 |
958 | [[collapse-events-table]]
959 | .Collapse events
960 | [options="header"]
961 | |=======================
962 | |Event |Description
963 | |show |This event fires immediately when the `show` instance method is called.
964 | |shown |This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
965 | |hide | This event is fired immediately when the `hide` method has been called.
966 | |hidden |This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
967 | |=======================
968 |
969 | After a `
396 |
401 | ----
402 |
403 | [[toggle_figure]]
404 | .Toggleable tabs
405 | image::images/boot_0403.png[]
406 |
407 |
408 | ==== Usage
409 |
410 | To enable the tabs, you can use the Bootstrap Data API or use JavaScript directly. With the Data API, you need to add `data-toggle` to the anchors. The anchor targets will activate the element that has the `.tab-pane` class and relative ID. Alternatively, `data-target=""` may be used instead of `href="#"` to apply the same action. Here is one way to enable tabs:
411 |
412 | [source, js]
413 | ----
414 | $('#myTab a').click(function (e) {
415 | e.preventDefault();
416 | $(this).tab('show');
417 | })
418 | ----
419 |
420 | Here's an example of different ways to activate tabs:
421 |
422 | [source, js]
423 | ----
424 | $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
425 | $('#myTab a:first').tab('show'); // Select first tab
426 | $('#myTab a:last').tab('show'); // Select last tab
427 | $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
428 | ----
429 |
430 | ==== Events
431 |
432 | Tabs panes have two different events that can be hooked into, as shown in <...
397 | ...
398 | ...
399 | ...
400 |
738 |
739 |
740 |
741 |
742 | ----
743 |
744 | [[checkbox_buttons]]
745 | .Checkbox buttons
746 | image::images/boot_0408.png[]
747 |
748 | ==== Radio Buttons
749 |
750 | Radio buttons (<
755 |
756 |
757 |
758 |
759 | ----
760 |
761 | [[radio_fig]]
762 | .Radio buttons
763 | image::images/boot_0409.png[]
764 |
765 | ==== Usage
766 |
767 | The `.button` method can be applied to any class or ID. To enable all buttons in the `.nav-tabs` via JavaScript, add the following code:
768 |
769 | [source, js]
770 | ----
771 | $('.nav-tabs').button()
772 | ----
773 |
774 | ==== Methods
775 |
776 | The following methods are useful to use with buttons.
777 |
778 | ===== Toggle
779 |
780 | Toggles push state. Gives the button the appearance that it has been activated:
781 |
782 | [source, js]
783 | ----
784 | $().button('toggle')
785 | ----
786 |
787 | ===== Loading
788 |
789 | When loading, the button is disabled and the text is changed to the option from the `data-loading-text` attribute:
790 |
791 | [source, html]
792 | ----
793 |
795 | ----
796 |
797 | ===== Reset
798 |
799 | Resets button state, bringing the original content back to the text. This method is useful when you need to return the button back to the primary state:
800 |
801 | [source, js]
802 | ----
803 | $().button('reset')
804 | ----
805 |
806 | ===== String
807 |
808 | String in this method is referring to any string declared by the user:
809 |
810 | [source, js]
811 | ----
812 | $().button('string')
813 | ----
814 |
815 | To reset the button state and bring in new content, use the string method:
816 |
817 | [source, html]
818 | ----
819 |
820 |
821 |
824 | ----
825 |
826 | === Collapse
827 |
828 | The collapse plugin makes it easy to make collapsing divisions of the page (see <
839 |
866 | ...
867 | ----
868 |
869 | You can also use the data attributes to make all content collapsible:
870 |
871 | [source, html]
872 | ----
873 |
877 |
878 |
840 |
852 |
841 |
843 | Collapsible Group Item #1
844 |
845 |
846 |
847 |
851 |
848 | Anim pariatur cliche...
849 |
850 |
853 |
865 |
854 |
856 | Collapsible Group Item #2
857 |
858 |
859 |
860 |
864 |
861 | Anim pariatur cliche...
862 |
863 | …
879 | ----
880 |
881 | ==== Usage
882 |
883 | ===== Via data attributes
884 |
885 | Like all of the plugins that use the Data API, you can add all needed markup without writing any JavaScript. Add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute will accept a CSS selector to apply the collapse to. Be sure to add the class `.collapse` to the collapsible element. If you'd like it to default open, include the additional class `.in`.
886 |
887 | To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`.
888 |
889 | ===== Via JavaScript
890 |
891 | The collapse method can activated with JavaScript as well:
892 |
893 | [source, js]
894 | ----
895 | $(".collapse").collapse()
896 | ----
897 |
898 | ==== Options
899 |
900 | The options listed in <` has been collapsed, you could use the following code to execute a function:
970 |
971 | [source, js]
972 | ----
973 | $('#myCollapsible').on('hidden', function () {
974 | // do something…
975 | })
976 | ----
977 |
978 | === Carousel
979 |
980 | The Bootstrap carousel (<>) is a flexible, responsive way to add a slider to your site. In addition to being responsive, the content is flexible enough to allow images, iframes, videos, or just about any type of content that you might want. (((JavaScript plugins, carousels)))(((carousels)))(((images)))(((videos)))(((iframes)))(((sliders)))
981 |
982 | [[carousel_fig]]
983 | .Carousel
984 | image::images/boot_0411.png[]
985 |
986 | The following code creates the Bootstrap carousel:
987 |
988 | [source, html]
989 | ----
990 |
1001 | ----
1002 |
1003 | ==== Usage
1004 |
1005 | To implement the carousel, you just need to add the code with the markup above. There is no need for data attributes, just simple class-based development. You can manually call the carousel with JavaScript, using the following code:
1006 |
1007 | [source, js]
1008 | ----
1009 | $('.carousel').carousel()
1010 | ----
1011 |
1012 | ==== Options
1013 |
1014 | Options can be passed through data attributes or through JavaScript. The options are listed in <>.
1015 |
1016 | [[carousel_options_table]]
1017 | .Carousel options
1018 | [options="header"]
1019 | |=======================
1020 | |Name |Type |Default |Description
1021 | |interval |number |5000 |The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
1022 | |pause |string |"hover" |Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
1023 | |=======================
1024 |
1025 |
1026 | ==== Methods
1027 |
1028 | The following methods are useful carousel code.
1029 |
1030 | ===== Options
1031 |
1032 | Initializes the carousel with an optional `options` object and starts cycling through items:
1033 |
1034 | [source, js]
1035 | ----
1036 | $('.carousel').carousel({
1037 | interval: 2000
1038 | })
1039 | ----
1040 |
1041 | ===== Cycle
1042 |
1043 | Cycles through the carousel items from left to right:
1044 |
1045 | [source, js]
1046 | ----
1047 | .carousel('cycle')
1048 | ----
1049 |
1050 | ===== Pause
1051 |
1052 | Stops the carousel from cycling through items:
1053 |
1054 | [source, js]
1055 | ----
1056 | .carousel('pause')
1057 | ----
1058 |
1059 | ===== Number
1060 |
1061 | Cycles the carousel to a particular frame (0-based, similar to an array):
1062 |
1063 | [source, js]
1064 | ----
1065 | .carousel('number')
1066 | ----
1067 |
1068 | ===== Prev
1069 |
1070 | Cycles to the previous item:
1071 |
1072 | [source, js]
1073 | ----
1074 | .carousel('prev')
1075 | ----
1076 |
1077 | ===== Next
1078 |
1079 | Cycles to the next item:
1080 |
1081 | [source, js]
1082 | ----
1083 | .carousel('next')
1084 | ----
1085 |
1086 |
1087 | ==== Events
1088 |
1089 | The carousel has two events that can be hooked into, described in <>:
1090 |
1091 | [[table_carousel_events]]
1092 | .Carousel events
1093 | [options="header"]
1094 | |=======================
1095 | |Event |Description
1096 | |slide |This event fires immediately when the slide instance method is invoked.
1097 | |slid |This event is fired when the carousel has completed its slide transition.
1098 | |=======================
1099 |
1100 | === Typeahead
1101 |
1102 | Typeahead allows you to easily create typeahead inputs in forms (<>). For example, you could preload states in a state field or, with some JavaScript, get search results using some AJAX calls.(((JavaScript plugins, typeahead)))(((typeahead)))(((autocomplete)))(((forms, typeahead)))((("input", "autocomplete/typeahead")))
1103 |
1104 | [[typeahead_fig]]
1105 | .Typeahead
1106 | image::images/boot_0412.png[]
1107 |
1108 | ==== Usage
1109 |
1110 | Using Data API, you can add sources via the `data-source` attribute. Items should be listed in either a JSON array or a function:
1111 |
1112 | [source, html]
1113 | ----
1114 |
1128 | ----
1129 |
1130 | To call directly with JavaScript, use the following method:
1131 |
1132 | [source, js]
1133 | ----
1134 | $('.typeahead').typeahead()
1135 | ----
1136 |
1137 | ==== Options
1138 |
1139 | <> shows a list of options.
1140 |
1141 | [[table4-13]]
1142 | .Carousel options
1143 | [options="header"]
1144 | |===========================
1145 | |Name |Type |Default |Description
1146 | |source |array, function|[ ] |The data source to query against. May be an array of strings or a function. The function is passed through two arguments: the `query` value in the input field and the `process` callback. The function may be used synchronously by returning the data source directly or asynchronously via the `process` callback's single argument.
1147 | |items |number |8 |The maximum number of items to display in the dropdown.
1148 | |minLength |number |1 |The minimum character length needed before triggering autocomplete suggestions.
1149 | |matcher |function |case insensitive |The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Accesses the current query with `this.query`. Return a Boolean true if query is a match.
1150 | |sorter |function |exact match, case sensitive, case insensitive|Method used to sort autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Reference the current query with `this.query`.
1151 | |updater |function |returns selected item |The method used to return the selected item. Accepts a single argument item and has the scope of the typeahead instance.
1152 | |highlighter|function |highlights all default matches |Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return HTML.
1153 | |===========================
1154 |
1155 |
1156 | === Affix
1157 |
1158 | The affix plugin allows a `
` to become affixed to a location on the page. A common example of this is social icons. They will start in a location, but as the page hits a certain mark, the `
` will become locked in place and will stop scrolling with the rest of the page.(((JavaScript plugins, affix)))(((affix plugin)))(((social icons)))(((icons)))
1159 |
1160 | ==== Usage
1161 |
1162 | To apply the affix plugin to a `
`, you can use either data attributes, or you can use JavaScript directly. Note that you must position the element so that it can be affixed to the page. Position is controlled by the `data-spy` attribute, using either `affix`, `affix-top`, or `affix-bottom`. You then use the `data-offset` to calculate the position of the scroll.(((range="endofrange", startref="ix_jsplug")))
1163 |
1164 | [source, html]
1165 | ----
1166 | >, if you want to use Bootstrap, you can simply download the _.zip_ archive from the site, or you can download using `git`.((("GitHub code repository")))
6 |
7 | For the uninitated, `git` is a free and open source version control system. Bootstrap and a host of other projects manage everything using GitHub, which is an online code repository for `git` projects. To download the source for Bootstrap, run the following commands from the command(((Bootstrap, downloading))) line:
8 |
9 | [source, bash]
10 | ----
11 | $ git clone https://github.com/twitter/bootstrap.git
12 | ----
13 |
14 | Cloning Bootstrap will give you a full download of all the files--not just the CSS/JavaScript, but also all of the documentation pages and the LESS files for the dynamic JavaScript elements.
15 |
16 | If desired, using the LESS files, you can compile your own version of Bootstrap with the features or customizations that you need.
17 |
18 | === Customizing Bootstrap
19 |
20 | You can download the source, or if you want to easily customize a few of the colors, sizing, or plugins, you can cater the Bootstrap to your needs via the http://twitter.github.com/bootstrap/customize.html[Bootstrap website].((("Bootstrap", "customizing", id="ix_BScus", range="startofrange")))
21 |
22 | ++++
23 |
24 | ++++
25 |
26 | When you use the customize page (<>), you decide what components you need. For example, you might choose to leave off all of the responsive features, or maybe you would like to leave off the button classes that conflict with styles that you already have. You can also opt out of any of the jQuery plugins. If you know that you aren't going to be using the modals or the carousel, you can leave it out of the build so that you have a smaller file to request.
27 |
28 | [[figure5_1]]
29 | .Customize page
30 | image::images/boot_0501.png[]
31 |
32 | Lastly, you can configure the LESS variables. Everything from column count to typography colors can be modified here. With these options, you can cater Bootstrap to your needs.(((LESS stylesheet variables)))
33 |
34 | ==== Using LESS
35 |
36 | There are a few different ways to use LESS with Bootstrap (<>). The first, and perhaps the easiest, is to use a preprocessor like CodeKit (<>) or SimpLESS. You can use these tools to watch certain files or folders. Then when you save any of those files, they build the master CSS files. In addition to using traditional CSS techniques, you can use advanced features like mixins and functions to dynamically change the look of your site just by changing some variables.(((CodeKit preprocessor)))(((SimpLESS preprocessor)))
37 |
38 | [[figure5_2]]
39 | .Using Bootstrap with LESS
40 | image::images/boot_0502.png[]
41 |
42 | [[fig5_3]]
43 | .CodeKit and the Bootstrap code base
44 | image::images/boot_0503.png[]
45 |
46 | LESS is a dynamic stylesheet language for writing CSS. It allows you to write variables, functions, and mixins for your CSS. The Bootstrap _/less/_ folder has a few files, but for setting globals, check the _variables.less_ and _mixins.less_ files.
47 |
48 | In the _variables.less_ file, you will find all of the global variables for Bootstrap. Let's say you wanted to change the color of all of the links. You would simply update LESS to compile the CSS, and all of the links would change color.(((colors, changing for links)))(((links, changing color of)))
49 |
50 | [source, css]
51 | ----
52 | /* Old Code */
53 | @linkColor: #08c;
54 | @linkColorHover: darken(@linkColor, 15%);
55 |
56 | /* New Code */
57 | @linkColor: #7d00cc;
58 | @linkColorHover: darken(@linkColor, 15%);
59 | ----
60 |
61 | Now, all links are changed to a purple color, and buttons and other interface elements that call for +@linkColor+ will be updated throughout your site.
62 |
63 | In the beginning, I was really hesitant to use LESS. After all, I have been writing CSS for a long time, and I didn't feel the need to change. The nesting alone is such a huge timesaver that I'm really glad to have added it to my workflow.
64 |
65 |
66 | // Is there a LESS book that O'Reilly publishes?
67 | // I might know someone to write one... Want to include something like the following line:
68 | // This book doesn't mean to be the exclusive look at using LESS, for that checkout #### book by ####, which is a great resource for learning more about LESS.
69 |
70 | ==== Text Snippets
71 |
72 | To rapidly develop Bootstrap sites, I like to use http://www.sublimetext.com/2[Sublime Text 2] and the Bootstrap snippets (shown in <>) from DEVtellect on https://github.com/devtellect/sublime-twitter-bootstrap-snippets/[GitHub]. This makes adding any component as easy as adding a keyboard shortcut.(((text snippets)))(((Sublime Text 2)))(((snippets)))
73 |
74 | [[figure5_4]]
75 | .Bootstrap snippets
76 | image::images/boot_0504.png[width="4.6in"]
77 |
78 | To install the snippets, clone the git repository into your packages folder:
79 |
80 | [source, bash]
81 | ----
82 | git clone git@github.com:devtellect/sublime-twitter-bootstrap-snippets.git
83 | ----
84 |
85 | There are clippings for lots of popular IDEs/text editors.
86 |
87 | ==== Photoshop Templates
88 |
89 | In addition to snippets, there have been a few Photoshop documents of all of the Bootstrap markup elements. My favorite comes from http://gui.repixdesign.com/#bootstrap[Repix Design]. Their website is shown in <>.(((Photoshop templates)))((("templates", "Photoshop")))(((Repix Design)))
90 |
91 | [[repix_fig]]
92 | .Repix design
93 | image::images/boot_05in01.png[]
94 |
95 | Here are the features:
96 |
97 | * Adjustable colors
98 | * Separate layers
99 | * Vector-based
100 |
101 | The PSD is free, but the author requests that you pay with a tweet. Kind of a new spin on the free-as-in-free-speech mantra of open source programming.(((WrapBootstrap)))(((Bootswatch)))(((Bootstrap, themes for)))(((themes)))
102 |
103 | ==== Themes
104 |
105 | If you have a vanilla installation of Bootstrap, but want to add a bit of panache, there are few different ways to find free, and premium themes for Bootstrap. My two favorites are https://wrapbootstrap.com/[\{Wrap}Bootstrap], and http://bootswatch.com/[Bootswatch]. Both have some great options, and make it easy to get a new style on your site. (((range="endofrange", startref="ix_BScus")))
106 |
107 | === Built with Bootstrap
108 |
109 | If you are looking for even more inspiration, check out http://builtwithbootstrap.com/[Built With Bootstrap], a Tumblr that features screen grabs of user-submitted Bootstrap sites. It is a fun way to see the sites using Bootstrap.(((Built With Bootstrap)))
110 |
111 | === Conclusion
112 |
113 | As you can see, whatever the project, Bootstrap can fill the needs of just about any Web project. Its blend of responsive framework, extensive JavaScript plugins, and robust interface components make developing easy, fast, and feature rich. It has been great working with Bootstrap over the last year, and I look forward to the future development of the project. Cheers, kudos, and all of the accolades to Jacob Thornton and Mark Otto for creating a project that is so versatile and fun to develop around.((("Thornton, Jacob")))((("Otto, Mark")))
--------------------------------------------------------------------------------
/colo.asciidoc:
--------------------------------------------------------------------------------
1 | [colophon]
2 | = Colophon
3 |
4 | The animal on the cover of _Bootstrap_ is the Finnhorse. The Finnhorse is the official horse of Finland, and is nicknamed as the "universal horse" for its ability to meet the agricultural, economic, and recreational needs that a person might require from a horse. Though it has been fully bred and cultivated in Finland for centuries, the exact origin of this horse is unknown.
5 |
6 | The vast majority of Finnhorses are a chestnut color, with a very small percentage being black, silver, or bay-colored. In the 1800s, the chestnut-colored Finnhorse only accounted for roughly half the population, but through selective breeding throughout the 19th and 20th centuries, most other genes were bred out, as it was determined that chestnut was the original color of the breed and the national Finnish horse breeding association sought to eliminate "foreign" colors. It was also selectively bred to be an average-sized horse--the average height is 61 inches--with the ability and muscles to do hard labor and the agility to be used for the purposes of riding or entertainment.
7 |
8 | Today, most Finnhorses are used for harness racing and other recreational purposes. It was originally the only horse used for racing in Finland, but after the middle of the 20th century, other horses were introduced into the sport. The horse is also used frequently at riding schools and for therapy.
9 |
10 | The cover image is from a loose plate of German origin, exact source unknown. The cover font is Adobe ITC Garamond. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag's Ubuntu Mono.
11 |
--------------------------------------------------------------------------------
/foreword.asciidoc:
--------------------------------------------------------------------------------
1 | [au="Dave Winer", auaffil="editor, Scripting News, January 2013, New York"]
2 | [preface]
3 | Foreword
4 | --------
5 |
6 | I was a software developer before Mac existed, so I remember how the tech industry reacted to it. For the most part, the community reacted with a fair amount of skepticism. The interesting thing is that the negative things people say about Bootstrap today sound exactly like the negative things people said about the Mac in 1984. And in both cases, the things that people didn't like were what made them important.((("Winer, Dave")))
7 |
8 | Apple realized that there is a set of things that all software has to do, so why shouldn't they all do them the same way? If they did, software would be easier to develop and debug, but more important—it would be easier to use. If there was only one way to create menus, then once a user learned how to use the menus of one app, he would already know how to use the menus of all others. The same is true with scrollbars, windows, the keyboard, the mouse, printing, and sound.
9 |
10 | The reason programmers didn't like it, (and I was one of them) was that they took what we did and commoditized it. Further, there were limits to the one-size-fits-all approach. There were some apps that didn't take to the UI standards very well. What to do about them? Well, you adapted, that's what you did.((("UIs (user interfaces)", "standardization of")))
11 |
12 | This is a well-known technical process called factoring. If you see yourself doing something over and over, do it one more time really well, work on the API so it's easy and flexible, and that's it. You never do it again. It's how you build ever-taller buildings out of software. What was the leading edge five years ago is baked into the operating system today. Progress. It's a wonderful thing!((("factoring, definition of")))
13 |
14 | The same patterns are observable in the Web. In fact, it's kind of sad how much of a repeat it is, how backward today's development environment is compared to the one envisioned by the Mac. But at least Bootstrap is out there doing the factoring. If I want to put up a menu, I can just use the code that creates menus. Sure, my menu looks like all the others, but that's a good thing for users. There is no need to learn a second or third way to use a menu.(((Bootstrap, factoring and)))
15 |
16 | That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works any time you want to do a Bootstrap technique. Nothing to do; no libraries to include. It's as if it were part of the hardware. It's the same approach that Apple took with the Mac OS in 1984.(((Bootstrap, similarities to Mac OS)))((("Mac OS, similarities to Bootstrap")))
17 |
18 | Like all important technologies, Bootstrap is "good enough" but not too good. In other words, the designers, Mark Otto and Jacob Thornton, could have factored more than they did. However, while they could have created something more compact and perhaps more elegant, it wouldn't have been nearly as approachable. The great thing about Bootstrap for a guy like me, who has been busy building software behind websites, is that it solves a whole bunch of problems that we all have when putting a user interface on those sites.((("Otto, Mark")))((("Thornton, Jacob")))
19 |
20 | However, I think that will turn out to be just the beginning. I see the opportunity for Bootstrap to become an integral part of the Web—a toolkit that you can count on being present in every environment you work in. Further, someday, perhaps soon, designers will be able to plug in skins for Bootstrap that transform the appearance of a site without any modification to the code or to its styles or scripts. I don't see any limits to what can be done with Bootstrap. Rather than being a replacement for designers, it creates opportunities for designers to have more power and reach.(((Bootstrap, future of)))
21 |
22 | These days, part of the maturing process of any new technology is the release of its O'Reilly book. Now Bootstrap has one. The author, Jake Spurlock, a web developer, has been building sites with Bootstrap, has spoken at conferences about it, and he credits me for getting him started with a series of enthusiastic blog posts I wrote as I was discovering its power and elegance. Now, I can happily turn you over to Jake's able hands. He will show you how the Bootstrap magic works, so you too can help move the web development world forward.
23 |
--------------------------------------------------------------------------------
/images/._boot_0504forEdit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/._boot_0504forEdit.png
--------------------------------------------------------------------------------
/images/alert.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/alert.png
--------------------------------------------------------------------------------
/images/boot_0101.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0101.png
--------------------------------------------------------------------------------
/images/boot_0102.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0102.png
--------------------------------------------------------------------------------
/images/boot_0103.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0103.png
--------------------------------------------------------------------------------
/images/boot_0104.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0104.png
--------------------------------------------------------------------------------
/images/boot_0201.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0201.png
--------------------------------------------------------------------------------
/images/boot_0202.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0202.png
--------------------------------------------------------------------------------
/images/boot_0203.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0203.png
--------------------------------------------------------------------------------
/images/boot_0204.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0204.png
--------------------------------------------------------------------------------
/images/boot_0205.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0205.png
--------------------------------------------------------------------------------
/images/boot_0206.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0206.png
--------------------------------------------------------------------------------
/images/boot_0207.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0207.png
--------------------------------------------------------------------------------
/images/boot_0208.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0208.png
--------------------------------------------------------------------------------
/images/boot_0209.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0209.png
--------------------------------------------------------------------------------
/images/boot_0210.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0210.png
--------------------------------------------------------------------------------
/images/boot_0211.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0211.png
--------------------------------------------------------------------------------
/images/boot_0212.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0212.png
--------------------------------------------------------------------------------
/images/boot_0213.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0213.png
--------------------------------------------------------------------------------
/images/boot_0214.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0214.png
--------------------------------------------------------------------------------
/images/boot_0215.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0215.png
--------------------------------------------------------------------------------
/images/boot_0216.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0216.png
--------------------------------------------------------------------------------
/images/boot_0217.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0217.png
--------------------------------------------------------------------------------
/images/boot_0218.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0218.png
--------------------------------------------------------------------------------
/images/boot_0219.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0219.png
--------------------------------------------------------------------------------
/images/boot_0220.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0220.png
--------------------------------------------------------------------------------
/images/boot_0221.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0221.png
--------------------------------------------------------------------------------
/images/boot_0222.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0222.png
--------------------------------------------------------------------------------
/images/boot_0223.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0223.png
--------------------------------------------------------------------------------
/images/boot_0224.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0224.png
--------------------------------------------------------------------------------
/images/boot_0225.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0225.png
--------------------------------------------------------------------------------
/images/boot_0226.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0226.png
--------------------------------------------------------------------------------
/images/boot_0227.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0227.png
--------------------------------------------------------------------------------
/images/boot_0228.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0228.png
--------------------------------------------------------------------------------
/images/boot_0229.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0229.png
--------------------------------------------------------------------------------
/images/boot_0230.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0230.png
--------------------------------------------------------------------------------
/images/boot_0231.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0231.png
--------------------------------------------------------------------------------
/images/boot_0232.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0232.png
--------------------------------------------------------------------------------
/images/boot_0233.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0233.png
--------------------------------------------------------------------------------
/images/boot_0234.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0234.png
--------------------------------------------------------------------------------
/images/boot_0235.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0235.png
--------------------------------------------------------------------------------
/images/boot_0236.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0236.png
--------------------------------------------------------------------------------
/images/boot_0237.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0237.png
--------------------------------------------------------------------------------
/images/boot_0238.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0238.png
--------------------------------------------------------------------------------
/images/boot_0239.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0239.png
--------------------------------------------------------------------------------
/images/boot_0240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0240.png
--------------------------------------------------------------------------------
/images/boot_0241.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0241.png
--------------------------------------------------------------------------------
/images/boot_0242.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0242.png
--------------------------------------------------------------------------------
/images/boot_0243.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0243.png
--------------------------------------------------------------------------------
/images/boot_0244.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0244.png
--------------------------------------------------------------------------------
/images/boot_0245.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0245.png
--------------------------------------------------------------------------------
/images/boot_02in01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in01.png
--------------------------------------------------------------------------------
/images/boot_02in02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in02.png
--------------------------------------------------------------------------------
/images/boot_02in03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in03.png
--------------------------------------------------------------------------------
/images/boot_02in04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in04.png
--------------------------------------------------------------------------------
/images/boot_02in05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in05.png
--------------------------------------------------------------------------------
/images/boot_02in06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_02in06.png
--------------------------------------------------------------------------------
/images/boot_0301.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0301.png
--------------------------------------------------------------------------------
/images/boot_0302.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0302.png
--------------------------------------------------------------------------------
/images/boot_0303.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0303.png
--------------------------------------------------------------------------------
/images/boot_0304.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0304.png
--------------------------------------------------------------------------------
/images/boot_0305.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0305.png
--------------------------------------------------------------------------------
/images/boot_0306.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0306.png
--------------------------------------------------------------------------------
/images/boot_0307.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0307.png
--------------------------------------------------------------------------------
/images/boot_0308.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0308.png
--------------------------------------------------------------------------------
/images/boot_0309.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0309.png
--------------------------------------------------------------------------------
/images/boot_0310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0310.png
--------------------------------------------------------------------------------
/images/boot_0311.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0311.png
--------------------------------------------------------------------------------
/images/boot_0312.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0312.png
--------------------------------------------------------------------------------
/images/boot_0313.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0313.png
--------------------------------------------------------------------------------
/images/boot_0314.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0314.png
--------------------------------------------------------------------------------
/images/boot_0315.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0315.png
--------------------------------------------------------------------------------
/images/boot_0316.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0316.png
--------------------------------------------------------------------------------
/images/boot_0317.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0317.png
--------------------------------------------------------------------------------
/images/boot_0318.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0318.png
--------------------------------------------------------------------------------
/images/boot_0319.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0319.png
--------------------------------------------------------------------------------
/images/boot_0320.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0320.png
--------------------------------------------------------------------------------
/images/boot_0321.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0321.png
--------------------------------------------------------------------------------
/images/boot_0322.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0322.png
--------------------------------------------------------------------------------
/images/boot_0323.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0323.png
--------------------------------------------------------------------------------
/images/boot_0324.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0324.png
--------------------------------------------------------------------------------
/images/boot_0325.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0325.png
--------------------------------------------------------------------------------
/images/boot_0326.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0326.png
--------------------------------------------------------------------------------
/images/boot_0327.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0327.png
--------------------------------------------------------------------------------
/images/boot_0328.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0328.png
--------------------------------------------------------------------------------
/images/boot_0329.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0329.png
--------------------------------------------------------------------------------
/images/boot_0330.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0330.png
--------------------------------------------------------------------------------
/images/boot_0331.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0331.png
--------------------------------------------------------------------------------
/images/boot_0332.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0332.png
--------------------------------------------------------------------------------
/images/boot_0333.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0333.png
--------------------------------------------------------------------------------
/images/boot_0334.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0334.png
--------------------------------------------------------------------------------
/images/boot_0335.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0335.png
--------------------------------------------------------------------------------
/images/boot_0336.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0336.png
--------------------------------------------------------------------------------
/images/boot_0337.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0337.png
--------------------------------------------------------------------------------
/images/boot_0338.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0338.png
--------------------------------------------------------------------------------
/images/boot_0339.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0339.png
--------------------------------------------------------------------------------
/images/boot_0340.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0340.png
--------------------------------------------------------------------------------
/images/boot_0341.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0341.png
--------------------------------------------------------------------------------
/images/boot_0342.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0342.png
--------------------------------------------------------------------------------
/images/boot_0343.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0343.png
--------------------------------------------------------------------------------
/images/boot_0344.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0344.png
--------------------------------------------------------------------------------
/images/boot_0345.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0345.png
--------------------------------------------------------------------------------
/images/boot_0346.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0346.png
--------------------------------------------------------------------------------
/images/boot_0347.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0347.png
--------------------------------------------------------------------------------
/images/boot_0348.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0348.png
--------------------------------------------------------------------------------
/images/boot_0349.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0349.png
--------------------------------------------------------------------------------
/images/boot_0350.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0350.png
--------------------------------------------------------------------------------
/images/boot_0351.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0351.png
--------------------------------------------------------------------------------
/images/boot_03in01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_03in01.png
--------------------------------------------------------------------------------
/images/boot_0401.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0401.png
--------------------------------------------------------------------------------
/images/boot_0402.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0402.png
--------------------------------------------------------------------------------
/images/boot_0403.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0403.png
--------------------------------------------------------------------------------
/images/boot_0404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0404.png
--------------------------------------------------------------------------------
/images/boot_0405.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0405.png
--------------------------------------------------------------------------------
/images/boot_0406.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0406.png
--------------------------------------------------------------------------------
/images/boot_0407.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0407.png
--------------------------------------------------------------------------------
/images/boot_0408.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0408.png
--------------------------------------------------------------------------------
/images/boot_0409.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0409.png
--------------------------------------------------------------------------------
/images/boot_0410.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0410.png
--------------------------------------------------------------------------------
/images/boot_0411.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0411.png
--------------------------------------------------------------------------------
/images/boot_0412.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0412.png
--------------------------------------------------------------------------------
/images/boot_04in01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_04in01.png
--------------------------------------------------------------------------------
/images/boot_04in02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_04in02.png
--------------------------------------------------------------------------------
/images/boot_0501.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0501.png
--------------------------------------------------------------------------------
/images/boot_0502.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0502.png
--------------------------------------------------------------------------------
/images/boot_0503.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0503.png
--------------------------------------------------------------------------------
/images/boot_0504.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0504.png
--------------------------------------------------------------------------------
/images/boot_0504forEdit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_0504forEdit.png
--------------------------------------------------------------------------------
/images/boot_05in01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/boot_05in01.png
--------------------------------------------------------------------------------
/images/btn-danger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-danger.png
--------------------------------------------------------------------------------
/images/btn-info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-info.png
--------------------------------------------------------------------------------
/images/btn-inverse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-inverse.png
--------------------------------------------------------------------------------
/images/btn-link.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-link.png
--------------------------------------------------------------------------------
/images/btn-primary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-primary.png
--------------------------------------------------------------------------------
/images/btn-success.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-success.png
--------------------------------------------------------------------------------
/images/btn-warning.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn-warning.png
--------------------------------------------------------------------------------
/images/btn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/btn.png
--------------------------------------------------------------------------------
/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/cover.png
--------------------------------------------------------------------------------
/images/dropdown-sub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/dropdown-sub.png
--------------------------------------------------------------------------------
/images/inline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/inline.png
--------------------------------------------------------------------------------
/images/outdoor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/outdoor.png
--------------------------------------------------------------------------------
/images/responsive-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/responsive-grid.png
--------------------------------------------------------------------------------
/images/tab-below.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/tab-below.png
--------------------------------------------------------------------------------
/images/tabs-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/tabs-left.png
--------------------------------------------------------------------------------
/images/tabs-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/images/tabs-right.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Bootstrap, from Twitter
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
39 |
40 |
41 |
42 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
73 |
74 |
1167 | ...
1168 |
1169 | ----
1170 |
1171 | ==== Option
1172 |
1173 | [options="header"]
1174 | |===========================
1175 | |Name |Type |Default |Description
1176 | |offset |number/function/object |10 |Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction or multiple unique offsets, just provide an object `offset: { x: 10 }`. Use a function when you need to dynamically provide an offset (useful for some responsive designs).
1177 | |===========================
1178 |
--------------------------------------------------------------------------------
/ch05.asciidoc:
--------------------------------------------------------------------------------
1 | == Using Bootstrap
2 |
3 | === GitHub Project
4 |
5 | Like a lot of great open source projects, the power of Bootstrap comes not just from the developers at the core of the project but also from the development community that supports it. http://github.com[GitHub] is a large code repository for projects, and at time of writing, Bootstrap is the most popular project. With over 42,000 stars and over 10,000 forks, the project is bustling with activity. As I mentioned in <
75 |
76 |
101 | 102 |
889 |
890 |
892 |
893 |
894 |
895 |
896 |
897 |
898 |
899 |
900 |
901 |
902 |
903 |
904 |
905 |
906 |
907 |
--------------------------------------------------------------------------------
/pdf/drafts/intake.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/pdf/drafts/intake.pdf
--------------------------------------------------------------------------------
/tools/._dbintakereport.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/whyisjake/Bootstrap/668722f4fa271c5fd0992bed7d60e40414fa97e7/tools/._dbintakereport.txt
--------------------------------------------------------------------------------
/tools/dbintakereport.txt:
--------------------------------------------------------------------------------
1 | Bootstrap, 1E / 9781449343910
2 | RT # 148404
3 |
4 | Stylesheet: animal
5 | Toolchain: Atlas/csspdf
6 | Atlas URL: http://atlas.labs.oreilly.com/books/1230000000673
7 |
8 | Incoming format: Asciidoc
9 | Outgoing format: Asciidoc
10 |
11 | Preliminary pagecount (with figs): xiv + 111 = 125
12 |
13 |
14 | Resources
15 | =========
16 |
17 | ** Intake PDFs:
18 | (Git repo) pdf/drafts/intake_web.pdf
19 |
20 | ** Figs: Illustrations has posted the figs. 135 total. (9 are inline images.)
21 |
22 |
23 | Notes from Tools:
24 | =================
25 |
26 | ** Syntax highlighting: applied to 193 out of 195 code listings.
27 |
28 | ** Some long code lines.
29 |
30 | ** Please let Tools know ASAP if there are any other global problems for which we can help automate a fix.
31 |
32 |
33 | Notes from Dan:
34 | ==================
35 |
36 | * Please move the Foreword so that it's before the Preface.
37 | [DONE AT INTAKE. --TOOLS]
38 |
39 | ==================
40 |
41 | Please let me know about any other issues.
42 |
43 | Thanks,
44 | Jess
45 |
46 |
--------------------------------------------------------------------------------
/tools/oneoffs/oneoff.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 |
3 | @import "DYNAMIC CSS PLACEHOLDER";
4 |
5 | /*--------Put Your Custom CSS Rules Below--------*/
6 |
7 |
8 |
9 | /*----Uncomment to turn on automatic code wrapping
10 |
11 | pre.programlisting, pre.screen, pre.literallayout {
12 | white-space: pre-wrap;
13 | word-wrap: break-word;
14 | }
15 | ----*/
16 |
17 | /*----Uncomment to fix a bad break in the title
18 | (increase padding value to push down, decrease
19 | value to pull up)
20 |
21 | div.book div.booktitlepage h1.title {
22 | padding-left: 1.5in;
23 | }
24 | ----*/
25 |
26 | /*----Uncomment to fix a bad break in the subtitle
27 | (increase padding value to push down, decrease
28 | value to pull up)
29 |
30 | div.book div.booktitlepage h2.subtitle {
31 | padding-left: 1in;
32 | }
33 | ----*/
34 |
35 | /*----Uncomment to fix a bad break in the author names
36 | (increase padding value to push down, decrease
37 | value to pull up)
38 |
39 | p.titlepageauthor {
40 | padding-left: 3in;
41 | }
42 | ----*/
43 |
44 | /*----Uncomment to suuppress colophon, show only
45 | "About the Authors"
46 |
47 | div.colophon {
48 | display: none;
49 | }
50 | ----*/
--------------------------------------------------------------------------------
77 |
81 |
82 | Hello, world!
78 |This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
79 | 80 |
83 |
99 |
100 |
84 |
88 | Heading
85 |Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
86 | 87 |
89 |
93 | Heading
90 |Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
91 | 92 |
94 |
98 | Heading
95 |Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
96 | 97 |101 | 102 |
103 |
145 |
146 |
104 |
117 | 1
105 | 1
106 | 1
107 | 1
108 | 1
109 | 1
110 | 1
111 | 1
112 | 1
113 | 1
114 | 1
115 | 1
116 |
118 |
125 | 2
119 | 2
120 | 2
121 | 2
122 | 2
123 | 2
124 |
126 |
131 | 3
127 | 3
128 | 3
129 | 3
130 |
132 |
136 | 4
133 | 4
134 | 4
135 |
137 |
140 | 6
138 | 6
139 |
141 |
143 |
144 | 12
142 |
147 |
177 |
178 |
148 |
156 | 1
149 | 1
150 | 1
151 | 1
152 | 1
153 | 1
154 | 1
155 |
157 |
161 | 5
158 | span2 offset1
159 | span3 offset1
160 |
162 |
165 | 2
163 | span7 offset2
164 |
166 |
168 | span9 offset3
167 |
169 |
172 | 6
170 | 6
171 |
173 |
175 |
176 | 12
174 |
179 |
180 |
191 |
192 |
181 |
189 |
190 |
182 | Level 1 of column
183 |
188 |
184 |
187 | Level 2
185 | Level 2
186 |
193 |
194 |
230 |
231 |
195 |
196 |
212 |
213 | RSS
197 | 198 |That joke had me ROTFLOL.
199 | 200 |201 |204 | 205 |That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.
202 | Developer of RSS, Dave Winer 203 |
That this is needed, desperately needed, is indicated by the incredible uptake of Bootstrap. I use it in all the server software I'm working on. And it shows through in the templating language I'm developing, so everyone who uses it will find it's "just there" and works, any time you want to do a Bootstrap technique. Nothing to do, no libraries to include. It's as if it were part of the hardware. Same approach that Apple took with the Mac OS in 1984.
206 | 207 |208 | 209 |This is just amazing.
How cool is this?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
210 | 211 |
214 |
215 |
216 | O'Reilly Media, Inc.
217 | 1005 Gravenstein HWY North
218 | Sebastopol, CA 95472
219 | P: (707) 827-7000 220 | 221 | 222 | 223 | Jake Spurlock
224 | flast@oreilly.com 225 | 226 | 227 |
228 |
229 | 217 | 1005 Gravenstein HWY North
218 | Sebastopol, CA 95472
219 | P: (707) 827-7000 220 | 221 | 222 | 223 | Jake Spurlock
224 | flast@oreilly.com 225 | 226 | 227 |
232 |
233 |
274 |
275 |
276 |
234 |
235 |
272 |
273 | Favorite Outdoor Activities
236 |-
237 |
- Backpacking in Yosemite 238 |
- Hiking in Arches
239 |
-
240 |
- Delicate Arch 241 |
- Park Avenue 242 |
244 | - Biking the Flintstones Trail 245 |
Self-Referential Task List
249 |-
250 |
- Turn off the internet. 251 |
- Right the book 252 |
- ... Profit? 253 |
Common Electronics Parts
256 |-
257 |
- LED 258 |
- A light-emitting diode (LED) is a semiconductor light source. 259 |
- Servo 260 |
- Servos are small, cheap, mass-produced actuators used for radio control and small robotics. 261 |
Common Electronics Parts
264 |-
265 |
- LED 266 |
- A light-emitting diode (LED) is a semiconductor light source. 267 |
- Servo 268 |
- Servos are small, cheap, mass-produced actuators used for radio control and small robotics. 269 |
277 |
278 |
305 |
306 |
279 |
280 |
292 |
293 | Lead Example
281 | 282 |Bacon ipsum dolor sit amet tri-tip pork loin ball tip frankfurter swine boudin meatloaf shoulder short ribs cow drumstick beef jowl. Meatball chicken sausage tail, kielbasa strip steak turducken venison prosciutto. Chuck filet mignon tri-tip ribeye, flank brisket leberkas. Swine turducken turkey shank, hamburger beef ribs bresaola pastrami venison rump.
283 | 284 |Instead of always using divs, in HTML5, you can use new elements like <section>, <header>, and <footer>. The html should look something like this:
286 | <article> 287 | <h1>Article Heading</h1> 288 | </article> 289 |290 | 291 |
294 |
295 |
303 |
304 | Heading 1
296 |Heading 2
297 |Heading 3
298 |Heading 4
299 |Heading 5
300 |Heading 6
301 | 302 |
307 |
308 |
882 |
883 |
888 |
309 |
310 |
313 |
314 |
315 |
340 |
341 |
342 |
343 |
377 |
378 |
386 |
387 |
797 |
798 |
799 | This is the seperator
311 | 312 || Name | 317 |Phone Number | 318 |Rank | 319 |
|---|---|---|
| Kyle West | 324 |707-827-7001 | 325 |Eagle | 326 |
| Davey Preston | 329 |707-827-7003 | 330 |Eagle | 331 |
| Taylor Lemmon | 334 |707-827-7005 | 335 |Eagle | 336 |
| # | 345 |Product | 346 |Payment Taken | 347 |Status | 348 |
|---|---|---|---|
| 1 | 353 |TB - Monthly | 354 |01/04/2012 | 355 |Approved | 356 |
| 2 | 359 |TB - Monthly | 360 |02/04/2012 | 361 |Declined | 362 |
| 3 | 365 |TB - Monthly | 366 |03/04/2012 | 367 |Pending | 368 |
| 4 | 371 |TB - Monthly | 372 |04/04/2012 | 373 |Call in to confirm | 374 |
388 |
389 |
398 |
399 |
400 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
401 |
402 |
795 |
796 |
403 |
404 |
423 |
424 |
496 |
497 |
793 |
794 |
498 |
499 |
508 |
509 |
500 |
501 |
506 |
507 | Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
502 | 503 |Turkey swine pork chop, fatback t-bone leberkas sirloin tongue beef sausage. Sausage tongue pork loin ball tip turkey andouille. Chicken sausage venison beef biltong beef ribs. Swine boudin shank jowl, chuck jerky biltong kielbasa venison tongue tail turducken salami chicken.
504 | 505 |
510 |
511 |
530 |
531 |
532 |
533 |
512 |
513 |
528 |
529 |
514 |
515 |
518 |
525 |
526 |
527 |
534 |
535 |
555 |
556 |
536 |
537 |
553 |
554 |
538 |
542 |
551 |
552 |
543 |
550 |
544 |
546 | Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
545 |
547 |
549 | Turkey swine pork chop, fatback t-bone leberkas sirloin tongue beef sausage. Sausage tongue pork loin ball tip turkey andouille. Chicken sausage venison beef biltong beef ribs. Swine boudin shank jowl, chuck jerky biltong kielbasa venison tongue tail turducken salami chicken.
548 |
557 |
558 |
602 |
603 |
559 |
560 |
566 |
567 |
573 |
574 |
579 |
580 |
599 |
600 |
601 |
581 | Default
582 | Success
583 | Warning
584 | Important
585 | Info
586 | Inverse
587 |
588 |
589 |
590 | 1
591 | 2
592 | 4
593 | 6
594 | 8
595 | 10
596 |
597 |
598 |
604 |
605 |
639 |
640 | -
606 |
- 607 | 615 | 616 |
- 617 | 625 | 626 |
- 627 | 635 | 636 | 637 | 638 |
641 |
642 |
790 |
791 |
792 |
643 |
644 |
787 |
788 |
789 |
645 | ×
646 |
649 |
650 | Dave Bowman: Open the pod bay doors, HAL.
647 |HAL: I'm sorry, Dave. I'm afraid I can't do that.
648 |
651 | ×
652 | Error! Change a few things up and try submitting again..
653 |
654 |
655 |
656 | ×
657 | Success! You successfully read this important alert message.
658 |
659 |
660 |
661 | ×
662 | Information! This alert needs your attention, but it's not super important.
663 |
664 |
665 |
666 |
667 | Look, I'm in a .well-large!
668 |
669 |
670 |
671 |
672 |
673 | Look, I'm in a .well-small!
674 |
675 |
676 |
677 |
718 |
719 | Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
720 | 721 |Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
722 | 723 | 738 | 739 |Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
740 | 741 |Bacon ipsum dolor sit amet jerky flank andouille, ham hock spare ribs pork loin jowl meatloaf kielbasa tail biltong pork boudin. Beef ribs brisket boudin beef bacon. Beef ribs shoulder ball tip capicola rump. Sausage cow tail strip steak t-bone flank ball tip short ribs andouille ground round. Ham hock turducken beef ribs prosciutto jerky doner brisket chicken. Pig chuck meatloaf, strip steak ribeye doner fatback chicken shankle ball tip pancetta capicola.
742 | 743 |
744 |
749 |
761 |
762 |
750 |
760 |
751 |
753 | I'm in section A.
752 |
754 |
756 | I'm in section B.
755 |
757 |
759 | I'm in section C.
758 |Jerky sirloin cow sausage. Pig kielbasa chicken, short ribs andouille filet mignon pork belly spare ribs ground round sausage beef. Ham hock ball tip hamburger pastrami pig turducken. Tongue ground round short loin hamburger prosciutto turducken turkey jerky tenderloin cow t-bone.
763 | 764 | 781 | 782 | 783 | 784 |Jerky sirloin cow sausage. Pig kielbasa chicken, short ribs andouille filet mignon pork belly spare ribs ground round sausage beef. Ham hock ball tip hamburger pastrami pig turducken. Tongue ground round short loin hamburger prosciutto turducken turkey jerky tenderloin cow t-bone.
785 | 786 |
800 |
801 |
813 |
814 |
815 |
816 |
817 |
876 |
877 |
878 |
879 |
880 |
881 | | Labels | 819 |Markup | 820 |
|---|---|
| 826 | Default 827 | | 828 |
829 | <span class="label">Default</span>
830 | |
831 |
| 834 | Success 835 | | 836 |
837 | <span class="label label-success">Success</span>
838 | |
839 |
| 842 | Warning 843 | | 844 |
845 | <span class="label label-warning">Warning</span>
846 | |
847 |
| 850 | Important 851 | | 852 |
853 | <span class="label label-important">Important</span>
854 | |
855 |
| 858 | Info 859 | | 860 |
861 | <span class="label label-info">Info</span>
862 | |
863 |
| 866 | Inverse 867 | | 868 |
869 | <span class="label label-inverse">Inverse</span>
870 | |
871 |