2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

v4 beta 3 docs

This commit is contained in:
Mark Otto
2017-12-28 09:55:44 -08:00
parent ed05e78a9b
commit b01323ae05
150 changed files with 12613 additions and 25343 deletions
+1 -1
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
@@ -0,0 +1,46 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
// Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
(function () {
'use strict'
function emulatedIEMajorVersion() {
var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
if (groups === null) {
return null
}
var ieVersionNum = parseInt(groups[1], 10)
var ieMajorVersion = Math.floor(ieVersionNum)
return ieMajorVersion
}
function actualNonEmulatedIEMajorVersion() {
// Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
// IE JavaScript conditional compilation docs: https://msdn.microsoft.com/library/121hztk3%28v=vs.94%29.aspx
// @cc_on docs: https://msdn.microsoft.com/library/8ka90k2e%28v=vs.94%29.aspx
var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // eslint-disable-line no-new-func
if (typeof jscriptVersion === 'undefined') {
return 11 // IE11+ not in emulation mode
}
if (jscriptVersion < 9) {
return 8 // IE8 (or lower; haven't tested on IE<8)
}
return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
}
var ua = window.navigator.userAgent
if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
return // Opera, which might pretend to be IE
}
var emulated = emulatedIEMajorVersion()
if (emulated === null) {
return // Not IE
}
var nonEmulated = actualNonEmulatedIEMajorVersion()
if (emulated !== nonEmulated) {
window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
}
}())
+2 -15
View File
@@ -7,24 +7,11 @@
window.addEventListener('load', function () { window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js').then(function (registration) { // eslint-disable-line compat/compat navigator.serviceWorker.register('/sw.js').then(function (registration) { // eslint-disable-line compat/compat
console.log('ServiceWorker registration successful with scope: ', registration.scope) console.log('ServiceWorker registration successful with scope: ', registration.scope)
registration.onupdatefound = function () {
var installingWorker = registration.installing
installingWorker.onstatechange = function () {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) { // eslint-disable-line compat/compat
console.log('new update available')
location.reload(true)
}
break
default:
}
}
}
}).catch(function (err) { }).catch(function (err) {
console.log('ServiceWorker registration failed: ', err) console.log('ServiceWorker registration failed: ', err)
}) })
}) })
} else {
console.log('Service workers are not supported.')
} }
}()) }())
+2 -1
View File
File diff suppressed because one or more lines are too long
+187
View File
@@ -0,0 +1,187 @@
/*
Copyright 2016 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
var WorkboxSW = (function () {
'use strict';
class ErrorFactory$1{constructor(a){this._errors=a;}createError(a,b){if(!(a in this._errors))throw new Error(`Unable to generate error '${a}'.`);let c=this._errors[a].replace(/\s+/g,' '),d=null;b&&(c+=` [${b.message}]`,d=b.stack);const e=new Error;return e.name=a,e.message=c,e.stack=d,e}}
const errors={"not-in-sw":'workbox-sw must be loaded in your service worker file.',"unsupported-route-type":'The first parameter to registerRoute() should be either an Express-style path string, a RegExp, or a function.',"empty-express-string":'The Express style route string must have some characters, an empty string is invalid.',"bad-revisioned-cache-list":`The 'precache()' method expects`+`an array of revisioned urls like so: ['/example/hello.1234.txt', `+`{path: 'hello.txt', revision: '1234'}]`,"navigation-route-url-string":`The registerNavigationRoute() method `+`expects a URL string as its first parameter.`,"bad-cache-id":`The 'cacheId' parameter must be a string with at least `+`one character`,"bad-skip-waiting":`The 'skipWaiting' parameter must be a boolean.`,"bad-clients-claim":`The 'clientsClaim' parameter must be a boolean.`,"bad-directory-index":`The 'directoryIndex' parameter must be a boolean.`};var ErrorFactory = new ErrorFactory$1(errors);
class LogGroup{constructor(){this._logs=[],this._childGroups=[],this._isFallbackMode=!1;const a=/Firefox\/(\d*)\.\d*/.exec(navigator.userAgent);if(a)try{const b=parseInt(a[1],10);55>b&&(this._isFallbackMode=!0);}catch(a){this._isFallbackMode=!0;}/Edge\/\d*\.\d*/.exec(navigator.userAgent)&&(this._isFallbackMode=!0);}addPrimaryLog(a){this._primaryLog=a;}addLog(a){this._logs.push(a);}addChildGroup(a){0===a._logs.length||this._childGroups.push(a);}print(){return 0===this._logs.length&&0===this._childGroups.length?void this._printLogDetails(this._primaryLog):void(this._primaryLog&&(this._isFallbackMode?this._printLogDetails(this._primaryLog):console.groupCollapsed(...this._getLogContent(this._primaryLog))),this._logs.forEach((a)=>{this._printLogDetails(a);}),this._childGroups.forEach((a)=>{a.print();}),this._primaryLog&&!this._isFallbackMode&&console.groupEnd())}_printLogDetails(a){const b=a.logFunc?a.logFunc:console.log;b(...this._getLogContent(a));}_getLogContent(a){let b=a.message;this._isFallbackMode&&'string'==typeof b&&(b=b.replace(/%c/g,''));let c=[b];return!this._isFallbackMode&&a.colors&&(c=c.concat(a.colors)),a.args&&(c=c.concat(a.args)),c}}
function isServiceWorkerGlobalScope(){return'ServiceWorkerGlobalScope'in self&&self instanceof ServiceWorkerGlobalScope}function isDevBuild(){return`dev`==`prod`}function isLocalhost(){return!!('localhost'===location.hostname||'[::1]'===location.hostname||location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))}
self.workbox=self.workbox||{},self.workbox.LOG_LEVEL=self.workbox.LOG_LEVEL||{none:-1,verbose:0,debug:1,warn:2,error:3};const LIGHT_GREY=`#bdc3c7`; const DARK_GREY=`#7f8c8d`; const LIGHT_GREEN=`#2ecc71`; const LIGHT_YELLOW=`#f1c40f`; const LIGHT_RED=`#e74c3c`; const LIGHT_BLUE=`#3498db`;class LogHelper{constructor(){this._defaultLogLevel=isDevBuild()?self.workbox.LOG_LEVEL.debug:self.workbox.LOG_LEVEL.warn;}log(a){this._printMessage(self.workbox.LOG_LEVEL.verbose,a);}debug(a){this._printMessage(self.workbox.LOG_LEVEL.debug,a);}warn(a){this._printMessage(self.workbox.LOG_LEVEL.warn,a);}error(a){this._printMessage(self.workbox.LOG_LEVEL.error,a);}_printMessage(a,b){if(this._shouldLogMessage(a,b)){const c=this._getAllLogGroups(a,b);c.print();}}_getAllLogGroups(a,b){const c=new LogGroup,d=this._getPrimaryMessageDetails(a,b);if(c.addPrimaryLog(d),b.error){const a={message:b.error,logFunc:console.error};c.addLog(a);}const e=new LogGroup;if(b.that&&b.that.constructor&&b.that.constructor.name){const a=b.that.constructor.name;e.addLog(this._getKeyValueDetails('class',a));}return b.data&&('object'!=typeof b.data||b.data instanceof Array?e.addLog(this._getKeyValueDetails('additionalData',b.data)):Object.keys(b.data).forEach((a)=>{e.addLog(this._getKeyValueDetails(a,b.data[a]));})),c.addChildGroup(e),c}_getKeyValueDetails(a,b){return{message:`%c${a}: `,colors:[`color: ${LIGHT_BLUE}`],args:b}}_getPrimaryMessageDetails(a,b){let c,d;a===self.workbox.LOG_LEVEL.verbose?(c='Info',d=LIGHT_GREY):a===self.workbox.LOG_LEVEL.debug?(c='Debug',d=LIGHT_GREEN):a===self.workbox.LOG_LEVEL.warn?(c='Warn',d=LIGHT_YELLOW):a===self.workbox.LOG_LEVEL.error?(c='Error',d=LIGHT_RED):void 0;let e=`%c🔧 %c[${c}]`;const f=[`color: ${LIGHT_GREY}`,`color: ${d}`];let g;return'string'==typeof b?g=b:b.message&&(g=b.message),g&&(g=g.replace(/\s+/g,' '),e+=`%c ${g}`,f.push(`color: ${DARK_GREY}; font-weight: normal`)),{message:e,colors:f}}_shouldLogMessage(a,b){if(!b)return!1;let c=this._defaultLogLevel;return self&&self.workbox&&'number'==typeof self.workbox.logLevel&&(c=self.workbox.logLevel),c===self.workbox.LOG_LEVEL.none||a<c?!1:!0}}var logHelper = new LogHelper;
const errors$1={"express-route-invalid-path":`When using ExpressRoute, you must
provide a path that starts with a '/' character (to match same-origin
requests) or that starts with 'http' (to match cross-origin requests)`};var ErrorFactory$3 = new ErrorFactory$1(errors$1);
var ErrorStackParser = {parse:()=>[]};
function atLeastOne(a){const b=Object.keys(a);b.some((b)=>a[b]!==void 0)||throwError('Please set at least one of the following parameters: '+b.map((a)=>`'${a}'`).join(', '));}function hasMethod(a,b){const c=Object.keys(a).pop(),d=typeof a[c][b];'function'!=d&&throwError(`The '${c}' parameter must be an object that exposes a
'${b}' method.`);}function isInstance(a,b){const c=Object.keys(a).pop();a[c]instanceof b||throwError(`The '${c}' parameter must be an instance of
'${b.name}'`);}function isOneOf(a,b){const c=Object.keys(a).pop();b.includes(a[c])||throwError(`The '${c}' parameter must be set to one of the
following: ${b}`);}function isType(a,b){const c=Object.keys(a).pop(),d=typeof a[c];d!==b&&throwError(`The '${c}' parameter has the wrong type. (Expected:
${b}, actual: ${d})`);}function isArrayOfType(a,b){const c=Object.keys(a).pop(),d=`The '${c}' parameter should be an array containing
one or more '${b}' elements.`;Array.isArray(a[c])||throwError(d);for(let e of a[c])typeof e!==b&&throwError(d);}function isArrayOfClass(a,b){const c=Object.keys(a).pop(),d=`The '${c}' parameter should be an array containing
one or more '${b.name}' instances.`;Array.isArray(a[c])||throwError(d);for(let e of a[c])e instanceof b||throwError(d);}function throwError(a){a=a.replace(/\s+/g,' ');const b=new Error(a);b.name='assertion-failed';const c=ErrorStackParser.parse(b);throw 3<=c.length&&(b.message=`Invalid call to ${c[2].functionName}() — `+a),b}
function normalizeHandler(a){return'object'==typeof a?(hasMethod({handler:a},'handle'),a):(isType({handler:a},'function'),{handle:a})}
const defaultMethod='GET';const validMethods=['DELETE','GET','HEAD','POST','PUT'];
class Route{constructor({match:a,handler:b,method:c}={}){this.handler=normalizeHandler(b),isType({match:a},'function'),this.match=a,c?(isOneOf({method:c},validMethods),this.method=c):this.method=defaultMethod;}}
var index$1=Array.isArray||function(a){return'[object Array]'==Object.prototype.toString.call(a)};
var index=pathToRegexp; var parse_1=parse; var compile_1=compile; var tokensToFunction_1=tokensToFunction; var tokensToRegExp_1=tokensToRegExp; var PATH_REGEXP=new RegExp('(\\\\.)|([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))','g');function parse(a,b){for(var c,d=[],e=0,f=0,g='',h=b&&b.delimiter||'/';null!=(c=PATH_REGEXP.exec(a));){var i=c[0],j=c[1],k=c.index;if(g+=a.slice(f,k),f=k+i.length,j){g+=j[1];continue}var l=a[f],m=c[2],n=c[3],o=c[4],p=c[5],q=c[6],r=c[7];g&&(d.push(g),g='');var s=c[2]||h,t=o||p;d.push({name:n||e++,prefix:m||'',delimiter:s,optional:'?'===q||'*'===q,repeat:'+'===q||'*'===q,partial:null!=m&&null!=l&&l!==m,asterisk:!!r,pattern:t?escapeGroup(t):r?'.*':'[^'+escapeString(s)+']+?'});}return f<a.length&&(g+=a.substr(f)),g&&d.push(g),d}function compile(a,b){return tokensToFunction(parse(a,b))}function encodeURIComponentPretty(a){return encodeURI(a).replace(/[\/?#]/g,function(a){return'%'+a.charCodeAt(0).toString(16).toUpperCase()})}function encodeAsterisk(a){return encodeURI(a).replace(/[?#]/g,function(a){return'%'+a.charCodeAt(0).toString(16).toUpperCase()})}function tokensToFunction(a){for(var b=Array(a.length),c=0;c<a.length;c++)'object'==typeof a[c]&&(b[c]=new RegExp('^(?:'+a[c].pattern+')$'));return function(c,d){for(var e,f='',g=c||{},h=d||{},k=h.pretty?encodeURIComponentPretty:encodeURIComponent,l=0;l<a.length;l++){if(e=a[l],'string'==typeof e){f+=e;continue}var i,m=g[e.name];if(null==m)if(e.optional){e.partial&&(f+=e.prefix);continue}else throw new TypeError('Expected "'+e.name+'" to be defined');if(index$1(m)){if(!e.repeat)throw new TypeError('Expected "'+e.name+'" to not repeat, but received `'+JSON.stringify(m)+'`');if(0===m.length)if(e.optional)continue;else throw new TypeError('Expected "'+e.name+'" to not be empty');for(var n=0;n<m.length;n++){if(i=k(m[n]),!b[l].test(i))throw new TypeError('Expected all "'+e.name+'" to match "'+e.pattern+'", but received `'+JSON.stringify(i)+'`');f+=(0===n?e.prefix:e.delimiter)+i;}continue}if(i=e.asterisk?encodeAsterisk(m):k(m),!b[l].test(i))throw new TypeError('Expected "'+e.name+'" to match "'+e.pattern+'", but received "'+i+'"');f+=e.prefix+i;}return f}}function escapeString(a){return a.replace(/([.+*?=^!:${}()[\]|\/\\])/g,'\\$1')}function escapeGroup(a){return a.replace(/([=!:$\/()])/g,'\\$1')}function attachKeys(a,b){return a.keys=b,a}function flags(a){return a.sensitive?'':'i'}function regexpToRegexp(a,b){var c=a.source.match(/\((?!\?)/g);if(c)for(var d=0;d<c.length;d++)b.push({name:d,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return attachKeys(a,b)}function arrayToRegexp(a,b,c){for(var d=[],e=0;e<a.length;e++)d.push(pathToRegexp(a[e],b,c).source);var f=new RegExp('(?:'+d.join('|')+')',flags(c));return attachKeys(f,b)}function stringToRegexp(a,b,c){return tokensToRegExp(parse(a,c),b,c)}function tokensToRegExp(a,b,c){index$1(b)||(c=b||c,b=[]),c=c||{};for(var d,e=c.strict,f=!1!==c.end,g='',h=0;h<a.length;h++)if(d=a[h],'string'==typeof d)g+=escapeString(d);else{var i=escapeString(d.prefix),j='(?:'+d.pattern+')';b.push(d),d.repeat&&(j+='(?:'+i+j+')*'),j=d.optional?d.partial?i+'('+j+')?':'(?:'+i+'('+j+'))?':i+'('+j+')',g+=j;}var k=escapeString(c.delimiter||'/'),l=g.slice(-k.length)===k;return e||(g=(l?g.slice(0,-k.length):g)+'(?:'+k+'(?=$))?'),g+=f?'$':e&&l?'':'(?='+k+'|$)',attachKeys(new RegExp('^'+g,flags(c)),b)}function pathToRegexp(a,b,c){return index$1(b)||(c=b||c,b=[]),c=c||{},a instanceof RegExp?regexpToRegexp(a,b):index$1(a)?arrayToRegexp(a,b,c):stringToRegexp(a,b,c)}index.parse=parse_1,index.compile=compile_1,index.tokensToFunction=tokensToFunction_1,index.tokensToRegExp=tokensToRegExp_1;
class ExpressRoute extends Route{constructor({path:a,handler:b,method:c}){if(!(a.startsWith('/')||a.startsWith('http')))throw ErrorFactory$3.createError('express-route-invalid-path');let d=[];const e=index(a,d);super({match:({url:b})=>{if(a.startsWith('/')&&b.origin!==location.origin)return null;const c=a.startsWith('/')?b.pathname:b.href,f=c.match(e);if(!f)return null;const g={};return d.forEach((a,b)=>{g[a.name]=f[b+1];}),g},handler:b,method:c});}}
class NavigationRoute extends Route{constructor({whitelist:a,blacklist:b,handler:c}={}){isArrayOfClass({whitelist:a},RegExp),b?isArrayOfClass({blacklist:b},RegExp):b=[];super({match:({event:d,url:e})=>{let f,g=!1;if('navigate'===d.request.mode){const d=e.pathname+e.search;a.some((a)=>a.test(d))?b.some((a)=>a.test(d))?f=`The navigation route is not being used, since the `+`request URL matches both the whitelist and blacklist.`:(f=`The navigation route is being used.`,g=!0):f=`The navigation route is not being used, since the `+`URL being navigated to doesn't match the whitelist.`,logHelper.debug({that:this,message:f,data:{"request-url":e.href,whitelist:a,blacklist:b,handler:c}});}return g},handler:c,method:'GET'});}}
class RegExpRoute extends Route{constructor({regExp:a,handler:b,method:c}){isInstance({regExp:a},RegExp);super({match:({url:b})=>{const c=a.exec(b.href);return c?b.origin!==location.origin&&0!==c.index?(logHelper.debug({that:this,message:`Skipping route, because the RegExp match didn't occur `+`at the start of the URL.`,data:{url:b.href,regExp:a}}),null):c.slice(1):null},handler:b,method:c});}}
class Router$2{constructor(){this._routes=new Map,this._isListenerRegistered=!1;}addFetchListener(){return this._isListenerRegistered?(logHelper.warn({that:this,message:`addFetchListener() has already been called for this Router.`}),!1):(this._isListenerRegistered=!0,self.addEventListener('fetch',(a)=>{const b=this.handleRequest({event:a});b&&a.respondWith(b);}),!0)}handleRequest({event:a}){isInstance({event:a},FetchEvent);const b=new URL(a.request.url);if(!b.protocol.startsWith('http'))return void logHelper.log({that:this,message:`The URL does not start with HTTP, so it can't be handled.`,data:{request:a.request}});let{handler:c,params:d}=this._findHandlerAndParams({event:a,url:b});if(!c&&this.defaultHandler&&(c=this.defaultHandler),c){let e=c.handle({url:b,event:a,params:d});return this.catchHandler&&(e=e.catch((c)=>this.catchHandler.handle({url:b,event:a,error:c}))),e}}_findHandlerAndParams({event:a,url:b}){const c=this._routes.get(a.request.method)||[];for(const d of c){let c=d.match({url:b,event:a});if(c)return logHelper.log({that:this,message:'The router found a matching route.',data:{route:d,request:a.request}}),Array.isArray(c)&&0===c.length?c=void 0:c.constructor===Object&&0===Object.keys(c).length&&(c=void 0),{params:c,handler:d.handler}}return{handler:void 0,params:void 0}}setDefaultHandler({handler:a}={}){this.defaultHandler=normalizeHandler(a);}setCatchHandler({handler:a}={}){this.catchHandler=normalizeHandler(a);}registerRoutes({routes:a}={}){isArrayOfClass({routes:a},Route);for(let b of a)this._routes.has(b.method)||this._routes.set(b.method,[]),this._routes.get(b.method).unshift(b);}registerRoute({route:a}={}){isInstance({route:a},Route),this.registerRoutes({routes:[a]});}unregisterRoutes({routes:a}={}){isArrayOfClass({routes:a},Route);for(let b of a){this._routes.has(b.method)||logHelper.error({that:this,message:`Can't unregister route; there are no ${b.method}
routes registered.`,data:{route:b}});const a=this._routes.get(b.method).indexOf(b);-1<a?this._routes.get(b.method).splice(a,1):logHelper.error({that:this,message:`Can't unregister route; the route wasn't previously
registered.`,data:{route:b}});}}unregisterRoute({route:a}={}){isInstance({route:a},Route),this.unregisterRoutes({routes:[a]});}}
class Router$$1 extends Router$2{constructor(a,b){super({handleFetch:b}),this._revisionedCacheName=a;}registerRoute(a,b,c='GET'){'function'==typeof b&&(b={handle:b});let d;if('string'==typeof a){if(0===a.length)throw ErrorFactory.createError('empty-express-string');const e=a.startsWith('http')?new URL(a,location).pathname:a,f=e.match(/[*:?+]/);f&&logHelper.warn({message:`registerRoute() was called with a string containing an `+`Express-style wildcard character. In the next version of `+`Workbox, Express-style wildcards won't be supported, and `+`strings will be treated a exact matches. Please switch to `+`regular expressions for equivalent behavior.`,data:{"Path String":a,"Wildcard Character":f[0],"Learn More":'https://goo.gl/xZMKEV'}}),d=new ExpressRoute({path:a,handler:b,method:c});}else if(a instanceof RegExp)d=new RegExpRoute({regExp:a,handler:b,method:c});else if('function'==typeof a)d=new Route({match:a,handler:b,method:c});else throw ErrorFactory.createError('unsupported-route-type');return super.registerRoute({route:d}),d}registerNavigationRoute(a,b={}){if('string'!=typeof a)throw ErrorFactory.createError('navigation-route-url-string');const c='cacheName'in b?b.cacheName:this._revisionedCacheName;super.registerRoute({route:new NavigationRoute({handler:()=>caches.match(a,{cacheName:c}),whitelist:b.whitelist||[/./],blacklist:b.blacklist||[]})});}}
const errors$2={"multiple-cache-will-update-plugins":'You cannot register more than one plugin that implements cacheWillUpdate.',"multiple-cached-response-will-be-used-plugins":'You cannot register more than one plugin that implements cachedResponseWillBeUsed.',"invalid-response-for-caching":'The fetched response could not be cached due to an invalid response code.',"no-response-received":'No response received; falling back to cache.',"bad-cache-id":`The 'cacheId' parameter must be a string with at least `+`one character.`};var ErrorFactory$4 = new ErrorFactory$1(errors$2);
class CacheableResponse{constructor({statuses:a,headers:b}={}){atLeastOne({statuses:a,headers:b}),a!==void 0&&isArrayOfType({statuses:a},'number'),b!==void 0&&isType({headers:b},'object'),this.statuses=a,this.headers=b;}isResponseCacheable({request:a,response:b}={}){isInstance({response:b},Response);let c=!0;if(this.statuses&&(c=this.statuses.includes(b.status)),this.headers&&c&&(c=Object.keys(this.headers).some((a)=>b.headers.get(a)===this.headers[a])),!c){const c={response:b};this.statuses&&(c['valid-status-codes']=JSON.stringify(this.statuses)),this.headers&&(c['valid-headers']=JSON.stringify(this.headers)),a&&(c.request=a),logHelper.debug({message:`The response does not meet the criteria for being added to the
cache.`,data:c});}return c}}
class CacheableResponsePlugin extends CacheableResponse{cacheWillUpdate({request:a,response:b}={}){return this.isResponseCacheable({request:a,response:b})}}
const getDefaultCacheName=({cacheId:a}={})=>{let b=`workbox-runtime-caching`;return a&&(b=`${a}-${b}`),self&&self.registration&&(b+=`-${self.registration.scope}`),b};
const pluginCallbacks=['cacheDidUpdate','cachedResponseWillBeUsed','cacheWillUpdate','fetchDidFail','requestWillFetch'];
var cleanResponseCopy = (({response:a})=>{isInstance({response:a},Response);const b=a.clone(),c='body'in b?Promise.resolve(b.body):b.blob();return c.then((a)=>new Response(a,{headers:b.headers,status:b.status,statusText:b.statusText}))});
var asyncToGenerator = function (fn) {
return function () {
var gen = fn.apply(this, arguments);
return new Promise(function (resolve, reject) {
function step(key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
return Promise.resolve(value).then(function (value) {
step("next", value);
}, function (err) {
step("throw", err);
});
}
}
return step("next");
});
};
};
class RequestWrapper{constructor({cacheName:a,cacheId:b,plugins:c,fetchOptions:d,matchOptions:e}={}){if(b&&('string'!=typeof b||0===b.length))throw ErrorFactory$4.createError('bad-cache-id');a?(isType({cacheName:a},'string'),this.cacheName=a,b&&(this.cacheName=`${b}-${this.cacheName}`)):this.cacheName=getDefaultCacheName({cacheId:b}),d&&(isType({fetchOptions:d},'object'),this.fetchOptions=d),e&&(isType({matchOptions:e},'object'),this.matchOptions=e),this.plugins=new Map,c&&(isArrayOfType({plugins:c},'object'),c.forEach((a)=>{for(let b of pluginCallbacks)if('function'==typeof a[b]){if(!this.plugins.has(b))this.plugins.set(b,[]);else if('cacheWillUpdate'===b)throw ErrorFactory$4.createError('multiple-cache-will-update-plugins');else if('cachedResponseWillBeUsed'===b)throw ErrorFactory$4.createError('multiple-cached-response-will-be-used-plugins');this.plugins.get(b).push(a);}})),this.plugins.has('cacheWillUpdate')&&(this._userSpecifiedCachableResponsePlugin=this.plugins.get('cacheWillUpdate')[0]);}getDefaultCacheableResponsePlugin(){return this._defaultCacheableResponsePlugin||(this._defaultCacheableResponsePlugin=new CacheableResponsePlugin({statuses:[200]})),this._defaultCacheableResponsePlugin}getCache(){var a=this;return asyncToGenerator(function*(){return a._cache||(a._cache=yield caches.open(a.cacheName)),a._cache})()}match({request:a}){var b=this;return asyncToGenerator(function*(){atLeastOne({request:a});const c=yield b.getCache();let d=yield c.match(a,b.matchOptions);if(b.plugins.has('cachedResponseWillBeUsed')){const e=b.plugins.get('cachedResponseWillBeUsed')[0];d=yield e.cachedResponseWillBeUsed({request:a,cache:c,cachedResponse:d,matchOptions:b.matchOptions,cacheName:b.cacheName});}return d})()}fetch({request:a}){var b=this;return asyncToGenerator(function*(){'string'==typeof a?a=new Request(a):isInstance({request:a},Request);const c=b.plugins.has('fetchDidFail')?a.clone():null;if(b.plugins.has('requestWillFetch'))for(let c of b.plugins.get('requestWillFetch')){const b=yield c.requestWillFetch({request:a});isInstance({returnedRequest:b},Request),a=b;}try{return yield fetch(a,b.fetchOptions)}catch(a){if(b.plugins.has('fetchDidFail'))for(let a of b.plugins.get('fetchDidFail'))yield a.fetchDidFail({request:c.clone()});throw a}})()}fetchAndCache({request:a,waitOnCache:b,cacheKey:c,cacheResponsePlugin:d,cleanRedirects:e}){var f=this;return asyncToGenerator(function*(){atLeastOne({request:a});let g;const h=yield f.fetch({request:a}),i=f._userSpecifiedCachableResponsePlugin||d||f.getDefaultCacheableResponsePlugin(),j=yield i.cacheWillUpdate({request:a,response:h});if(j){const b=e&&h.redirected?yield cleanResponseCopy({response:h}):h.clone();g=f.getCache().then((()=>{var d=asyncToGenerator(function*(d){let e;const g=c||a;if('opaque'!==h.type&&f.plugins.has('cacheDidUpdate')&&(e=yield f.match({request:g})),yield d.put(g,b),f.plugins.has('cacheDidUpdate'))for(let a of f.plugins.get('cacheDidUpdate'))yield a.cacheDidUpdate({cacheName:f.cacheName,oldResponse:e,newResponse:b,url:'url'in g?g.url:g});});return function(){return d.apply(this,arguments)}})());}else if(!j&&b)throw ErrorFactory$4.createError('invalid-response-for-caching');return b&&g&&(yield g),h})()}}
class Handler{constructor({requestWrapper:a,waitOnCache:b}={}){this.requestWrapper=a?a:new RequestWrapper,this.waitOnCache=!!b;}handle({event:a,params:b}={}){throw Error('This abstract method must be implemented in a subclass.')}}
class CacheFirst extends Handler{handle({event:a}={}){var b=this;return asyncToGenerator(function*(){isInstance({event:a},FetchEvent);const c=yield b.requestWrapper.match({request:a.request});return c||(yield b.requestWrapper.fetchAndCache({request:a.request,waitOnCache:b.waitOnCache}))})()}}
class CacheOnly extends Handler{handle({event:a}={}){var b=this;return asyncToGenerator(function*(){return isInstance({event:a},FetchEvent),yield b.requestWrapper.match({request:a.request})})()}}
class NetworkFirst extends Handler{constructor(a={}){super(a),this._cacheablePlugin=new CacheableResponsePlugin({statuses:[0,200]});const{networkTimeoutSeconds:b}=a;b&&(isType({networkTimeoutSeconds:b},'number'),this.networkTimeoutSeconds=b);}handle({event:a}={}){var b=this;return asyncToGenerator(function*(){isInstance({event:a},FetchEvent);const c=[];let d;b.networkTimeoutSeconds&&c.push(new Promise(function(c){d=setTimeout(function(){c(b.requestWrapper.match({request:a.request}));},1e3*b.networkTimeoutSeconds);}));const e=b.requestWrapper.fetchAndCache({request:a.request,waitOnCache:b.waitOnCache,cacheResponsePlugin:b._cacheablePlugin}).then(function(a){return d&&clearTimeout(d),a?a:Promise.reject(ErrorFactory$4.createError('no-response-received'))}).catch(function(){return b.requestWrapper.match({request:a.request})});return c.push(e),Promise.race(c)})()}}
class NetworkOnly extends Handler{handle({event:a}={}){var b=this;return asyncToGenerator(function*(){return isInstance({event:a},FetchEvent),yield b.requestWrapper.fetch({request:a.request})})()}}
class StaleWhileRevalidate extends Handler{constructor(a={}){super(a),this._cacheablePlugin=new CacheableResponsePlugin({statuses:[0,200]});}handle({event:a}={}){var b=this;return asyncToGenerator(function*(){isInstance({event:a},FetchEvent);const c=b.requestWrapper.fetchAndCache({request:a.request,waitOnCache:b.waitOnCache,cacheResponsePlugin:b._cacheablePlugin}).catch(function(){return Response.error()}),d=yield b.requestWrapper.match({request:a.request});return d||(yield c)})()}}
let tmpIdbName=`workbox-cache-expiration`;self&&self.registration&&(tmpIdbName+=`-${self.registration.scope}`);const idbName=tmpIdbName;const idbVersion=1;const urlPropertyName='url';const timestampPropertyName='timestamp';
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var idb=createCommonjsModule(function(a){'use strict';(function(){function b(a){return Array.prototype.slice.call(a)}function c(a){return new Promise(function(b,c){a.onsuccess=function(){b(a.result);},a.onerror=function(){c(a.error);};})}function d(a,b,d){var e,f=new Promise(function(f,g){e=a[b].apply(a,d),c(e).then(f,g);});return f.request=e,f}function e(a,b,c){var e=d(a,b,c);return e.then(function(a){return a?new k(a,e.request):void 0})}function f(a,b,c){c.forEach(function(c){Object.defineProperty(a.prototype,c,{get:function(){return this[b][c]},set:function(a){this[b][c]=a;}});});}function g(a,b,c,e){e.forEach(function(e){e in c.prototype&&(a.prototype[e]=function(){return d(this[b],e,arguments)});});}function h(a,b,c,d){d.forEach(function(d){d in c.prototype&&(a.prototype[d]=function(){return this[b][d].apply(this[b],arguments)});});}function i(a,b,c,d){d.forEach(function(d){d in c.prototype&&(a.prototype[d]=function(){return e(this[b],d,arguments)});});}function j(a){this._index=a;}function k(a,b){this._cursor=a,this._request=b;}function l(a){this._store=a;}function m(a){this._tx=a,this.complete=new Promise(function(b,c){a.oncomplete=function(){b();},a.onerror=function(){c(a.error);},a.onabort=function(){c(a.error);};});}function n(a,b,c){this._db=a,this.oldVersion=b,this.transaction=new m(c);}function o(a){this._db=a;}f(j,'_index',['name','keyPath','multiEntry','unique']),g(j,'_index',IDBIndex,['get','getKey','getAll','getAllKeys','count']),i(j,'_index',IDBIndex,['openCursor','openKeyCursor']),f(k,'_cursor',['direction','key','primaryKey','value']),g(k,'_cursor',IDBCursor,['update','delete']),['advance','continue','continuePrimaryKey'].forEach(function(a){a in IDBCursor.prototype&&(k.prototype[a]=function(){var b=this,d=arguments;return Promise.resolve().then(function(){return b._cursor[a].apply(b._cursor,d),c(b._request).then(function(a){return a?new k(a,b._request):void 0})})});}),l.prototype.createIndex=function(){return new j(this._store.createIndex.apply(this._store,arguments))},l.prototype.index=function(){return new j(this._store.index.apply(this._store,arguments))},f(l,'_store',['name','keyPath','indexNames','autoIncrement']),g(l,'_store',IDBObjectStore,['put','add','delete','clear','get','getAll','getKey','getAllKeys','count']),i(l,'_store',IDBObjectStore,['openCursor','openKeyCursor']),h(l,'_store',IDBObjectStore,['deleteIndex']),m.prototype.objectStore=function(){return new l(this._tx.objectStore.apply(this._tx,arguments))},f(m,'_tx',['objectStoreNames','mode']),h(m,'_tx',IDBTransaction,['abort']),n.prototype.createObjectStore=function(){return new l(this._db.createObjectStore.apply(this._db,arguments))},f(n,'_db',['name','version','objectStoreNames']),h(n,'_db',IDBDatabase,['deleteObjectStore','close']),o.prototype.transaction=function(){return new m(this._db.transaction.apply(this._db,arguments))},f(o,'_db',['name','version','objectStoreNames']),h(o,'_db',IDBDatabase,['close']),['openCursor','openKeyCursor'].forEach(function(a){[l,j].forEach(function(c){c.prototype[a.replace('open','iterate')]=function(){var c=b(arguments),d=c[c.length-1],e=this._store||this._index,f=e[a].apply(e,c.slice(0,-1));f.onsuccess=function(){d(f.result);};};});}),[j,l].forEach(function(a){a.prototype.getAll||(a.prototype.getAll=function(a,b){var c=this,d=[];return new Promise(function(e){c.iterateCursor(a,function(a){return a?(d.push(a.value),void 0!==b&&d.length==b?void e(d):void a.continue()):void e(d)});})});});var p={open:function(a,b,c){var e=d(indexedDB,'open',[a,b]),f=e.request;return f.onupgradeneeded=function(a){c&&c(new n(f.result,a.oldVersion,f.transaction));},e.then(function(a){return new o(a)})},delete:function(a){return d(indexedDB,'deleteDatabase',[a])}};a.exports=p,a.exports.default=a.exports;})();});
const errors$3={"max-entries-or-age-required":`Either the maxEntries or maxAgeSeconds
parameters (or both) are required when constructing Plugin.`,"max-entries-must-be-number":`The maxEntries parameter to the Plugin
constructor must either be a number or undefined.`,"max-age-seconds-must-be-number":`The maxAgeSeconds parameter to the Plugin
constructor must either be a number or undefined.`};var ErrorFactory$5 = new ErrorFactory$1(errors$3);
class CacheExpiration{constructor({maxEntries:a,maxAgeSeconds:b}={}){if(!(a||b))throw ErrorFactory$5.createError('max-entries-or-age-required');if(a&&'number'!=typeof a)throw ErrorFactory$5.createError('max-entries-must-be-number');if(b&&'number'!=typeof b)throw ErrorFactory$5.createError('max-age-seconds-must-be-number');this.maxEntries=a,this.maxAgeSeconds=b,this._dbs=new Map,this._caches=new Map,this._expirationMutex=!1,this._timestampForNextRun=null;}getDB({cacheName:a}={}){var b=this;return asyncToGenerator(function*(){isType({cacheName:a},'string');const c=`${idbName}-${a}`;if(!b._dbs.has(c)){const d=yield idb.open(c,idbVersion,function(b){const c=b.createObjectStore(a,{keyPath:urlPropertyName});c.createIndex(timestampPropertyName,timestampPropertyName,{unique:!1});});b._dbs.set(c,d);}return b._dbs.get(c)})()}getCache({cacheName:a}={}){var b=this;return asyncToGenerator(function*(){if(isType({cacheName:a},'string'),!b._caches.has(a)){const c=yield caches.open(a);b._caches.set(a,c);}return b._caches.get(a)})()}isResponseFresh({cacheName:a,cachedResponse:b,now:c}={}){if(b&&this.maxAgeSeconds){isInstance({cachedResponse:b},Response);const d=b.headers.get('date');if(d){'undefined'==typeof c&&(c=Date.now());const a=new Date(d),b=a.getTime();return!!isNaN(b)||b+1e3*this.maxAgeSeconds>c}return this.expireEntries({cacheName:a,now:c}),!0}return!0}updateTimestamp({cacheName:a,url:b,now:c}={}){var d=this;return asyncToGenerator(function*(){isType({url:b},'string'),isType({cacheName:a},'string');const e=new URL(b,location);e.hash='','undefined'==typeof c&&(c=Date.now());const f=yield d.getDB({cacheName:a}),g=f.transaction(a,'readwrite');g.objectStore(a).put({[timestampPropertyName]:c,[urlPropertyName]:e.href}),yield g.complete;})()}expireEntries({cacheName:a,now:b}={}){var c=this;return asyncToGenerator(function*(){if(c._expirationMutex)return void(c._timestampForNextRun=b);c._expirationMutex=!0,isType({cacheName:a},'string'),'undefined'==typeof b&&(b=Date.now());const d=c.maxAgeSeconds?yield c.findOldEntries({cacheName:a,now:b}):[],e=c.maxEntries?yield c.findExtraEntries({cacheName:a}):[],f=[...new Set(d.concat(e))];if(yield c.deleteFromCacheAndIDB({cacheName:a,urls:f}),0<f.length&&logHelper.debug({that:c,message:'Expired entries have been removed from the cache.',data:{cacheName:a,urls:f}}),c._expirationMutex=!1,c._timestampForNextRun){const b=c._timestampForNextRun;return c._timestampForNextRun=null,c.expireEntries({cacheName:a,now:b})}})()}findOldEntries({cacheName:a,now:b}={}){var c=this;return asyncToGenerator(function*(){isType({cacheName:a},'string'),isType({now:b},'number');const d=b-1e3*c.maxAgeSeconds,e=[],f=yield c.getDB({cacheName:a}),g=f.transaction(a,'readonly'),h=g.objectStore(a),i=h.index(timestampPropertyName);return i.iterateCursor(function(a){a&&(a.value[timestampPropertyName]<d&&e.push(a.value[urlPropertyName]),a.continue());}),yield g.complete,e})()}findExtraEntries({cacheName:a}={}){var b=this;return asyncToGenerator(function*(){isType({cacheName:a},'string');const c=[],d=yield b.getDB({cacheName:a});let e=d.transaction(a,'readonly'),f=e.objectStore(a),g=f.index(timestampPropertyName);const h=yield g.count();return h>b.maxEntries&&(e=d.transaction(a,'readonly'),f=e.objectStore(a),g=f.index(timestampPropertyName),g.iterateCursor(function(a){a&&(c.push(a.value[urlPropertyName]),h-c.length>b.maxEntries&&a.continue());})),yield e.complete,c})()}deleteFromCacheAndIDB({cacheName:a,urls:b}={}){var c=this;return asyncToGenerator(function*(){if(isType({cacheName:a},'string'),isArrayOfType({urls:b},'string'),0<b.length){const d=yield c.getCache({cacheName:a}),e=yield c.getDB({cacheName:a});for(let c of b){yield d.delete(c);const b=e.transaction(a,'readwrite'),f=b.objectStore(a);f.delete(c),yield b.complete;}}})()}}
class CacheExpirationPlugin extends CacheExpiration{cachedResponseWillBeUsed({cacheName:a,cachedResponse:b,now:c}={}){return this.isResponseFresh({cacheName:a,cachedResponse:b,now:c})?b:null}cacheDidUpdate({cacheName:a,newResponse:b,url:c,now:d}={}){var e=this;return asyncToGenerator(function*(){isType({cacheName:a},'string'),isInstance({newResponse:b},Response),'undefined'==typeof d&&(d=Date.now()),yield e.updateTimestamp({cacheName:a,url:c,now:d}),yield e.expireEntries({cacheName:a,now:d});})()}}
const errors$4={"channel-name-required":`The channelName parameter is required when
constructing a new BroadcastCacheUpdate instance.`,"responses-are-same-parameters-required":`The first, second, and
headersToCheck parameters must be valid when calling responsesAreSame()`};var ErrorFactory$6 = new ErrorFactory$1(errors$4);
const cacheUpdatedMessageType='CACHE_UPDATED';
const defaultHeadersToCheck=['content-length','etag','last-modified'];
const defaultSource='workbox-broadcast-cache-update';
function broadcastUpdate({channel:a,cacheName:b,url:c,source:d}={}){isInstance({channel:a},BroadcastChannel),isType({cacheName:b},'string'),isType({source:d},'string'),isType({url:c},'string'),a.postMessage({type:cacheUpdatedMessageType,meta:d,payload:{cacheName:b,updatedUrl:c}});}
function responsesAreSame({first:a,second:b,headersToCheck:c}={}){if(!(a instanceof Response&&b instanceof Response&&c instanceof Array))throw ErrorFactory$6.createError('responses-are-same-parameters-required');const d=c.some((c)=>a.headers.has(c)&&b.headers.has(c));return d?c.every((c)=>a.headers.has(c)===b.headers.has(c)&&a.headers.get(c)===b.headers.get(c)):(logHelper.log({message:`Unable to determine whether the response has been updated
because none of the headers that would be checked are present.`,data:{"First Response":a,"Second Response":b,"Headers To Check":JSON.stringify(c)}}),!0)}
class BroadcastCacheUpdate{constructor({channelName:a,headersToCheck:b,source:c}={}){if('string'!=typeof a||0===a.length)throw ErrorFactory$6.createError('channel-name-required');this.channelName=a,this.headersToCheck=b||defaultHeadersToCheck,this.source=c||defaultSource;}get channel(){return this._channel||(this._channel=new BroadcastChannel(this.channelName)),this._channel}notifyIfUpdated({first:a,second:b,cacheName:c,url:d}){isType({cacheName:c},'string'),responsesAreSame({first:a,second:b,headersToCheck:this.headersToCheck})||broadcastUpdate({cacheName:c,url:d,channel:this.channel,source:this.source});}}
class BroadcastCacheUpdatePlugin extends BroadcastCacheUpdate{cacheDidUpdate({cacheName:a,oldResponse:b,newResponse:c,url:d}){isType({cacheName:a},'string'),isInstance({newResponse:c},Response),b&&this.notifyIfUpdated({cacheName:a,first:b,second:c,url:d});}}
class Strategies{constructor({cacheId:a}={}){this._cacheId=a;}cacheFirst(a){return this._getCachingMechanism(CacheFirst,a)}cacheOnly(a){return this._getCachingMechanism(CacheOnly,a)}networkFirst(a){return this._getCachingMechanism(NetworkFirst,a)}networkOnly(a){return this._getCachingMechanism(NetworkOnly,a)}staleWhileRevalidate(a){return this._getCachingMechanism(StaleWhileRevalidate,a)}_getCachingMechanism(a,b={}){const c={cacheExpiration:CacheExpirationPlugin,broadcastCacheUpdate:BroadcastCacheUpdatePlugin,cacheableResponse:CacheableResponsePlugin},d={plugins:[]};b.excludeCacheId||(d.cacheId=this._cacheId),b.cacheName&&(d.cacheName=b.cacheName);const e=Object.keys(c);return e.forEach((a)=>{if(b[a]){const e=c[a],f=b[a];d.plugins.push(new e(f));}}),b.plugins&&b.plugins.forEach((a)=>{d.plugins.push(a);}),b.requestWrapper=new RequestWrapper(d),new a(b)}}
const errorMessageFactory=(a,b)=>{let c=`An error was thrown by workbox with error code: `+`;'${a}'`;return b&&(c+=` with extras: '${JSON.stringify(b)}'`),c};
class WorkboxError extends Error{constructor(a,b){super(),this.name=a,this.message=errorMessageFactory(a,b),b&&(this.extras=b);}}
class BaseCacheManager{constructor({cacheName:a,cacheId:b,plugins:c}={}){if(b&&('string'!=typeof b||0===b.length))throw new WorkboxError('bad-cache-id',{cacheId:b});this._entriesToCache=new Map,this._requestWrapper=new RequestWrapper({cacheName:a,cacheId:b,plugins:c,fetchOptions:{credentials:'same-origin'}});}_addEntries(a){this._parsedCacheUrls=null,a.forEach((a)=>{this._addEntryToInstallList(this._parseEntry(a));});}getCacheName(){return this._requestWrapper.cacheName}getCachedUrls(){return this._parsedCacheUrls||(this._parsedCacheUrls=Array.from(this._entriesToCache.keys()).map((a)=>new URL(a,location).href)),this._parsedCacheUrls}_addEntryToInstallList(a){const b=a.entryID,c=this._entriesToCache.get(a.entryID);return c?void this._onDuplicateInstallEntryFound(a,c):void this._entriesToCache.set(b,a)}install(){var a=this;return asyncToGenerator(function*(){if(0===a._entriesToCache.size)return[];const b=[];return a._entriesToCache.forEach(function(c){b.push(a._cacheEntry(c));}),Promise.all(b)})()}_cacheEntry(a){var b=this;return asyncToGenerator(function*(){const c=yield b._isAlreadyCached(a),d={url:a.request.url,revision:a.revision,wasUpdated:!c};if(c)return d;try{return yield b._requestWrapper.fetchAndCache({request:a.getNetworkRequest(),waitOnCache:!0,cacheKey:a.request,cleanRedirects:!0}),yield b._onEntryCached(a),d}catch(b){throw new WorkboxError('request-not-cached',{url:a.request.url,error:b})}})()}cleanup(){var a=this;return asyncToGenerator(function*(){if(!(yield caches.has(a.getCacheName())))return;const b=[];a._entriesToCache.forEach(function(a){b.push(a.request.url);});const c=yield a._getCache(),d=yield c.keys(),e=d.filter(function(a){return!b.includes(a.url)});return Promise.all(e.map((()=>{var b=asyncToGenerator(function*(b){yield c.delete(b),yield a._onEntryDeleted(b.url);});return function(){return b.apply(this,arguments)}})()))})()}_getCache(){var a=this;return asyncToGenerator(function*(){return a._cache||(a._cache=yield caches.open(a.getCacheName())),a._cache})()}_parseEntry(){throw new WorkboxError('requires-overriding')}_onDuplicateEntryFound(){throw new WorkboxError('requires-overriding')}_isAlreadyCached(){throw new WorkboxError('requires-overriding')}_onEntryCached(){throw new WorkboxError('requires-overriding')}_onEntryDeleted(){throw new WorkboxError('requires-overriding')}}
class IDBHelper{constructor(a,b,c){if(a==void 0||b==void 0||c==void 0)throw Error('name, version, storeName must be passed to the constructor.');this._name=a,this._version=b,this._storeName=c;}_getDb(){return this._dbPromise?this._dbPromise:(this._dbPromise=idb.open(this._name,this._version,(a)=>{a.createObjectStore(this._storeName);}).then((a)=>a),this._dbPromise)}close(){return this._dbPromise?this._dbPromise.then((a)=>{a.close(),this._dbPromise=null;}):void 0}put(a,b){return this._getDb().then((c)=>{const d=c.transaction(this._storeName,'readwrite'),e=d.objectStore(this._storeName);return e.put(b,a),d.complete})}delete(a){return this._getDb().then((b)=>{const c=b.transaction(this._storeName,'readwrite'),d=c.objectStore(this._storeName);return d.delete(a),c.complete})}get(a){return this._getDb().then((b)=>b.transaction(this._storeName).objectStore(this._storeName).get(a))}getAllValues(){return this._getDb().then((a)=>a.transaction(this._storeName).objectStore(this._storeName).getAll())}getAllKeys(){return this._getDb().then((a)=>a.transaction(this._storeName).objectStore(this._storeName).getAllKeys())}}
const cacheBustParamName='_workbox-precaching';const version='v1';const dbName='workbox-precaching';const dbVersion='1';const dbStorename='asset-revisions';let tmpRevisionedCacheName=`workbox-precaching-revisioned-${version}`;self&&self.registration&&(tmpRevisionedCacheName+=`-${self.registration.scope}`);const defaultRevisionedCacheName=tmpRevisionedCacheName;
class RevisionDetailsModel{constructor(){this._idbHelper=new IDBHelper(dbName,dbVersion,dbStorename);}get(a){return this._idbHelper.get(a)}put(a,b){return this._idbHelper.put(a,b)}delete(a){return this._idbHelper.delete(a)}_close(){this._idbHelper.close();}}
class BaseCacheEntry{constructor({entryID:a,revision:b,request:c,cacheBust:d}){this.entryID=a,this.revision=b,this.request=c,this.cacheBust=d;}getNetworkRequest(){if(!0!==this.cacheBust)return this.request;let a=this.request.url;const b={};if(!0===this.cacheBust)if('cache'in Request.prototype)b.cache='reload';else{const b=new URL(a,location);b.search+=(b.search?'&':'')+encodeURIComponent(cacheBustParamName)+'='+encodeURIComponent(this.revision),a=b.toString();}return new Request(a,b)}}
class StringCacheEntry extends BaseCacheEntry{constructor(a){if(isType({url:a},'string'),0===a.length)throw new WorkboxError('invalid-string-entry',{url:a});super({entryID:a,revision:a,request:new Request(a),cacheBust:!1});}}
class ObjectCacheEntry extends BaseCacheEntry{constructor({entryID:a,revision:b,url:c,cacheBust:d}){if('undefined'!=typeof b&&(isType({revision:b},'string'),0===b.length))throw new WorkboxError('invalid-object-entry',{problemParam:'revision',problemValue:b});if('undefined'==typeof d&&(d=!!b),isType({cacheBust:d},'boolean'),isType({url:c},'string'),0===c.length)throw new WorkboxError('invalid-object-entry',{problemParam:'url',problemValue:c});if('undefined'==typeof a)a=new URL(c,location).toString();else if(0===a.length)throw new WorkboxError('invalid-object-entry',{problemParam:'entryID',problemValue:a});super({entryID:a,revision:b||c,request:new Request(c),cacheBust:d});}}
class RevisionedCacheManager extends BaseCacheManager{constructor(a={}){a.cacheName=a.cacheName||defaultRevisionedCacheName,super(a),this._revisionDetailsModel=new RevisionDetailsModel;}addToCacheList({revisionedFiles:a}={}){isInstance({revisionedFiles:a},Array),super._addEntries(a);const b=a.filter((a)=>'string'==typeof a||!a.revision);0<b.length&&logHelper.debug({that:this,message:`Some precache entries are URLs without separate revision
fields. If the URLs themselves do not contain revisioning info,
like a hash or a version number, your users won't receive updates.`,data:{"URLs without revision fields":JSON.stringify(b),"Examples of safe, versioned URLs":`'/path/file.abcd1234.css' or '/v1.0.0/file.js'`,"Examples of dangerous, unversioned URLs":`'index.html' or '/path/file.css' or '/latest/file.js'`}});}_parseEntry(a){if(null===a)throw new WorkboxError('unexpected-precache-entry',{input:a});let b;switch(typeof a){case'string':b=new StringCacheEntry(a);break;case'object':b=new ObjectCacheEntry(a);break;default:throw new WorkboxError('unexpected-precache-entry',{input:a});}return b}_onDuplicateInstallEntryFound(a,b){if(b.revision!==a.revision)throw new WorkboxError('duplicate-entry-diff-revisions',{firstEntry:{url:b.request.url,revision:b.revision},secondEntry:{url:a.request.url,revision:a.revision}})}_isAlreadyCached(a){var b=this;return asyncToGenerator(function*(){const c=yield b._revisionDetailsModel.get(a.entryID);if(c!==a.revision)return!1;const d=yield b._getCache(),e=yield d.match(a.request);return!!e})()}_onEntryCached(a){var b=this;return asyncToGenerator(function*(){yield b._revisionDetailsModel.put(a.entryID,a.revision);})()}_onEntryDeleted(a){var b=this;return asyncToGenerator(function*(){yield b._revisionDetailsModel.delete(a);})()}_close(){this._revisionDetailsModel._close();}cleanup(){return super.cleanup().then(()=>this._close())}_createLogFriendlyString(a){let b=`\n`;return a.forEach((a)=>{b+=` URL: '${a.url}' Revision: `+`'${a.revision}'\n`;}),b}install(){return super.install().then((a)=>{const b=[],c=[];a.forEach((a)=>{a.wasUpdated?b.push({url:a.url,revision:a.revision}):c.push({url:a.url,revision:a.revision});});const d={};return 0<b.length&&(d['New / Updated Precache URL\'s']=this._createLogFriendlyString(b)),0<c.length&&(d['Up-to-date Precache URL\'s']=this._createLogFriendlyString(c)),logHelper.log({message:`Precache Details: ${b.length} requests `+`were added or updated and `+`${c.length} request are already `+`cached and up-to-date.`,data:d}),a})}}
if(!isServiceWorkerGlobalScope())throw new WorkboxError('not-in-sw');
class WorkboxSW$1{constructor({cacheId:a,skipWaiting:b,clientsClaim:c,handleFetch:d=!0,directoryIndex:e='index.html',precacheChannelName:f='precache-updates',ignoreUrlParametersMatching:g=[/^utm_/]}={}){if(!isServiceWorkerGlobalScope())throw ErrorFactory.createError('not-in-sw');if(isDevBuild()&&(isLocalhost()?logHelper.debug({message:'Welcome to Workbox!',data:{"📖":'Read the guides and documentation\nhttps://workboxjs.org/',"❓":'Use the [workbox] tag on StackOverflow to ask questions\nhttps://stackoverflow.com/questions/ask?tags=workbox',"🐛":'Found a bug? Report it on GitHub\nhttps://github.com/GoogleChrome/workbox/issues/new'}}):logHelper.warn(`This appears to be a production server. Please switch
to the smaller, optimized production build of Workbox.`)),a&&('string'!=typeof a||0===a.length))throw ErrorFactory.createError('bad-cache-id');if(b&&'boolean'!=typeof b)throw ErrorFactory.createError('bad-skip-waiting');if(c&&'boolean'!=typeof c)throw ErrorFactory.createError('bad-clients-claim');if('undefined'!=typeof e)if(!1===e||null===e)e=!1;else if('string'!=typeof e||0===e.length)throw ErrorFactory.createError('bad-directory-index');const h=[];f&&h.push(new BroadcastCacheUpdatePlugin({channelName:f,source:registration&&registration.scope?registration.scope:location})),this._runtimeCacheName=getDefaultCacheName({cacheId:a}),this._revisionedCacheManager=new RevisionedCacheManager({cacheId:a,plugins:h}),this._strategies=new Strategies({cacheId:a}),this._precacheRouter=new Router$$1(this._revisionedCacheManager.getCacheName()),this._router=new Router$$1(this._revisionedCacheManager.getCacheName()),d&&(this._precacheRouter.addFetchListener(),this._router.addFetchListener()),this._registerInstallActivateEvents(b,c),this._registerDefaultRoutes(g,e);}precache(a){if(!Array.isArray(a))throw ErrorFactory.createError('bad-revisioned-cache-list');this._revisionedCacheManager.addToCacheList({revisionedFiles:a});}get router(){return this._router}get strategies(){return this._strategies}get runtimeCacheName(){return this._runtimeCacheName}_registerInstallActivateEvents(a,b){self.addEventListener('install',(b)=>{const c=this._revisionedCacheManager.getCachedUrls();0<c.length&&logHelper.debug({that:this,message:`The precached URLs will automatically be served using a
cache-first strategy.`,data:{"Precached URLs":JSON.stringify(c)}}),b.waitUntil(this._revisionedCacheManager.install().then(()=>{if(a)return self.skipWaiting()}));}),self.addEventListener('activate',(a)=>{a.waitUntil(this._revisionedCacheManager.cleanup().then(()=>{if(b)return self.clients.claim()}));});}_registerDefaultRoutes(a,b){const c=[];(a||b)&&c.push(this._getCacheMatchPlugin(a,b));const d=this.strategies.cacheFirst({cacheName:this._revisionedCacheManager.getCacheName(),plugins:c,excludeCacheId:!0});this._precacheRouter.registerRoute(({url:c})=>{c.hash='';const d=this._revisionedCacheManager.getCachedUrls();if(-1!==d.indexOf(c.href))return!0;let e=this._removeIgnoreUrlParams(c.href,a);return-1!==d.indexOf(e.href)||b&&e.pathname.endsWith('/')&&(e.pathname+=b,-1!==d.indexOf(e.href))},d);}_getCacheMatchPlugin(a,b){var c=this;const d=(()=>{var d=asyncToGenerator(function*({request:d,cache:e,cachedResponse:f,matchOptions:g}){if(f)return f;let h=c._removeIgnoreUrlParams(d.url,a);return e.match(h.toString(),g).then(function(a){return!a&&h.pathname.endsWith('/')?(h.pathname+=b,e.match(h.toString(),g)):a})});return function(){return d.apply(this,arguments)}})();return{cachedResponseWillBeUsed:d}}_removeIgnoreUrlParams(a,b){const c=new URL(a),d=c.search.slice(1),e=d.split('&'),f=e.map((a)=>a.split('=')),g=f.filter((a)=>b.every((b)=>!b.test(a[0]))),h=g.map((a)=>a.join('='));return c.search=h.join('&'),c}}
return WorkboxSW$1;
}());
//# sourceMappingURL=workbox-sw.prod.v2.1.2.js.map
File diff suppressed because one or more lines are too long
+508 -287
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+5 -4
View File
@@ -1,5 +1,5 @@
/*! /*!
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com) * Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc. * Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -40,7 +40,7 @@ body {
} }
[tabindex="-1"]:focus { [tabindex="-1"]:focus {
outline: none !important; outline: 0 !important;
} }
hr { hr {
@@ -63,7 +63,7 @@ abbr[title],
abbr[data-original-title] { abbr[data-original-title] {
text-decoration: underline; text-decoration: underline;
-webkit-text-decoration: underline dotted; -webkit-text-decoration: underline dotted;
text-decoration: underline dotted; text-decoration: underline dotted;
cursor: help; cursor: help;
border-bottom: 0; border-bottom: 0;
} }
@@ -194,7 +194,7 @@ select,
summary, summary,
textarea { textarea {
-ms-touch-action: manipulation; -ms-touch-action: manipulation;
touch-action: manipulation; touch-action: manipulation;
} }
table { table {
@@ -330,6 +330,7 @@ output {
summary { summary {
display: list-item; display: list-item;
cursor: pointer;
} }
template { template {
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -1,8 +1,8 @@
/*! /*!
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com) * Bootstrap Reboot v4.0.0-beta.3 (https://getbootstrap.com)
* Copyright 2011-2017 The Bootstrap Authors * Copyright 2011-2017 The Bootstrap Authors
* Copyright 2011-2017 Twitter, Inc. * Copyright 2011-2017 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important} */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */ /*# sourceMappingURL=bootstrap-reboot.min.css.map */
File diff suppressed because one or more lines are too long
+1503 -978
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+650 -611
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+576 -534
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
File diff suppressed because one or more lines are too long
+2 -2
View File
File diff suppressed because one or more lines are too long
+1 -1
View File
File diff suppressed because one or more lines are too long
+92 -314
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for Bootstraps logo and brand usage guidelines.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Brand guidelines &middot; Bootstrap</title> <title>Brand guidelines · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Brand guidelines">
<meta name="twitter:description" content="Documentation and examples for Bootstraps logo and brand usage guidelines.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Brand guidelines">
<meta name="twitter:description" content="Documentation and examples for Bootstrap's logo and brand usage guidelines.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/brand/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/brand/"> <meta property="og:title" content="Brand guidelines">
<meta property="og:title" content="Brand guidelines"> <meta property="og:description" content="Documentation and examples for Bootstraps logo and brand usage guidelines.">
<meta property="og:description" content="Documentation and examples for Bootstrap's logo and brand usage guidelines."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li class="active bd-sidenav-active">
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -592,7 +386,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Brand guidelines</h1> <h1 class="bd-title" id="content">Brand guidelines</h1>
<p class="bd-lead">Documentation and examples for Bootstrap's logo and brand usage guidelines.</p> <p class="bd-lead">Documentation and examples for Bootstraps logo and brand usage guidelines.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Have a need for Bootstraps brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimps <a href="https://mailchimp.com/about/brand-assets/">Brand Assets</a>.</p> <p>Have a need for Bootstraps brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimps <a href="https://mailchimp.com/about/brand-assets/">Brand Assets</a>.</p>
@@ -673,20 +467,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -706,10 +487,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+7 -6
View File
@@ -3,9 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap - Content moved</title> <title>Bootstrap · Content moved</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/about/history/"> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/about/overview/">
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/about/history/"> <meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/about/overview/">
<meta name="robots" content="noindex">
<style> <style>
html { html {
display: flex; display: flex;
@@ -30,8 +31,8 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Redirecting</h1> <h1>Redirecting&hellip;</h1>
<a href="https://getbootstrap.com/docs/4.0/about/history/">Click here if you are not redirected</a> <a href="https://getbootstrap.com/docs/4.0/about/overview/">Click here if you are not redirected</a>
<script>window.location="https://getbootstrap.com/docs/4.0/about/history/";</script> <script>window.location="https://getbootstrap.com/docs/4.0/about/overview/";</script>
</body> </body>
</html> </html>
+93 -315
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Commonly asked questions about Bootstraps open source license.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>License FAQs &middot; Bootstrap</title> <title>License FAQs · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="License FAQs">
<meta name="twitter:description" content="Commonly asked questions about Bootstraps open source license.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="License FAQs">
<meta name="twitter:description" content="Commonly asked questions about Bootstrap's open source license.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/license/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/license/"> <meta property="og:title" content="License FAQs">
<meta property="og:title" content="License FAQs"> <meta property="og:description" content="Commonly asked questions about Bootstraps open source license.">
<meta property="og:description" content="Commonly asked questions about Bootstrap's open source license."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -583,7 +377,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">License FAQs</h1> <h1 class="bd-title" id="content">License FAQs</h1>
<p class="bd-lead">Commonly asked questions about Bootstrap's open source license.</p> <p class="bd-lead">Commonly asked questions about Bootstraps open source license.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p>Bootstrap is released under the MIT license and is copyright 2017 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p> <p>Bootstrap is released under the MIT license and is copyright 2017 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
@@ -620,7 +414,7 @@
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li> <li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul> </ul>
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.2/LICENSE">in the project repository</a> for more information.</p> <p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/LICENSE">in the project repository</a> for more information.</p>
</main> </main>
</div> </div>
@@ -629,20 +423,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -662,10 +443,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+438
View File
@@ -0,0 +1,438 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>About · Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/favicon.ico">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="About">
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/overview/">
<meta property="og:title" content="About">
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://themes.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://jobs.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Jobs');" target="_blank" rel="noopener">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v4.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/docs/4.0/">Latest (4.x)</a>
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
</a>
</li>
</ul>
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
</button>
</form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/getting-started/introduction/">
Getting started
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a></li><li>
<a href="/docs/4.0/getting-started/download/">
Download
</a></li><li>
<a href="/docs/4.0/getting-started/contents/">
Contents
</a></li><li>
<a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices
</a></li><li>
<a href="/docs/4.0/getting-started/javascript/">
JavaScript
</a></li><li>
<a href="/docs/4.0/getting-started/theming/">
Theming
</a></li><li>
<a href="/docs/4.0/getting-started/build-tools/">
Build tools
</a></li><li>
<a href="/docs/4.0/getting-started/webpack/">
Webpack
</a></li><li>
<a href="/docs/4.0/getting-started/accessibility/">
Accessibility
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/layout/grid/">
Grid
</a></li><li>
<a href="/docs/4.0/layout/media-object/">
Media object
</a></li><li>
<a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/">
Reboot
</a></li><li>
<a href="/docs/4.0/content/typography/">
Typography
</a></li><li>
<a href="/docs/4.0/content/code/">
Code
</a></li><li>
<a href="/docs/4.0/content/images/">
Images
</a></li><li>
<a href="/docs/4.0/content/tables/">
Tables
</a></li><li>
<a href="/docs/4.0/content/figures/">
Figures
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/">
Alerts
</a></li><li>
<a href="/docs/4.0/components/badge/">
Badge
</a></li><li>
<a href="/docs/4.0/components/breadcrumb/">
Breadcrumb
</a></li><li>
<a href="/docs/4.0/components/buttons/">
Buttons
</a></li><li>
<a href="/docs/4.0/components/button-group/">
Button group
</a></li><li>
<a href="/docs/4.0/components/card/">
Card
</a></li><li>
<a href="/docs/4.0/components/carousel/">
Carousel
</a></li><li>
<a href="/docs/4.0/components/collapse/">
Collapse
</a></li><li>
<a href="/docs/4.0/components/dropdowns/">
Dropdowns
</a></li><li>
<a href="/docs/4.0/components/forms/">
Forms
</a></li><li>
<a href="/docs/4.0/components/input-group/">
Input group
</a></li><li>
<a href="/docs/4.0/components/jumbotron/">
Jumbotron
</a></li><li>
<a href="/docs/4.0/components/list-group/">
List group
</a></li><li>
<a href="/docs/4.0/components/modal/">
Modal
</a></li><li>
<a href="/docs/4.0/components/navs/">
Navs
</a></li><li>
<a href="/docs/4.0/components/navbar/">
Navbar
</a></li><li>
<a href="/docs/4.0/components/pagination/">
Pagination
</a></li><li>
<a href="/docs/4.0/components/popovers/">
Popovers
</a></li><li>
<a href="/docs/4.0/components/progress/">
Progress
</a></li><li>
<a href="/docs/4.0/components/scrollspy/">
Scrollspy
</a></li><li>
<a href="/docs/4.0/components/tooltips/">
Tooltips
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/">
Borders
</a></li><li>
<a href="/docs/4.0/utilities/clearfix/">
Clearfix
</a></li><li>
<a href="/docs/4.0/utilities/close-icon/">
Close icon
</a></li><li>
<a href="/docs/4.0/utilities/colors/">
Colors
</a></li><li>
<a href="/docs/4.0/utilities/display/">
Display
</a></li><li>
<a href="/docs/4.0/utilities/embed/">
Embed
</a></li><li>
<a href="/docs/4.0/utilities/flex/">
Flex
</a></li><li>
<a href="/docs/4.0/utilities/float/">
Float
</a></li><li>
<a href="/docs/4.0/utilities/image-replacement/">
Image replacement
</a></li><li>
<a href="/docs/4.0/utilities/position/">
Position
</a></li><li>
<a href="/docs/4.0/utilities/screenreaders/">
Screenreaders
</a></li><li>
<a href="/docs/4.0/utilities/sizing/">
Sizing
</a></li><li>
<a href="/docs/4.0/utilities/spacing/">
Spacing
</a></li><li>
<a href="/docs/4.0/utilities/text/">
Text
</a></li><li>
<a href="/docs/4.0/utilities/vertical-align/">
Vertical align
</a></li><li>
<a href="/docs/4.0/utilities/visibility/">
Visibility
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend
</a>
<ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/">
Icons
</a></li></ul>
</div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/">
Migration
</a>
<ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
<a href="/docs/4.0/about/overview/">
Overview
</a></li><li>
<a href="/docs/4.0/about/brand/">
Brand
</a></li><li>
<a href="/docs/4.0/about/license/">
License
</a></li><li>
<a href="/docs/4.0/about/translations/">
Translations
</a></li></ul>
</div></nav>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">About</h1>
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="team">Team</h2>
<p>Bootstrap is maintained by a <a href="https://github.com/orgs/twbs/people">small team of developers</a> on GitHub. Were actively looking to grow this team and would love to hear from you if youre excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<h2 id="history">History</h2>
<p>Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.</p>
<p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being an open-sourced framework, Bootstrap was known as <em>Twitter Blueprint</em>. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.</p>
<p>Originally <a href="https://blog.twitter.com/2011/bootstrap-from-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, weve since had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>
<p>With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSSs flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.</p>
<h2 id="get-involved">Get involved</h2>
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
indexName: 'bootstrap-v4',
inputSelector: '#search-input',
handleSelected: function (input, event, suggestion) {
var url = suggestion.url;
url = suggestion.isLvl1 ? url.split('#')[0]: url;
// If it's a title we remove the anchor so it does not jump.
window.location.href = url;
},
transformData: function (hits) {
return hits.map(function (hit) {
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
return hit;
});
},
debug: false // Set debug to true if you want to inspect the dropdown
});
</script><script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
});
</script>
</body>
</html>
+94 -314
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Links to community-translated Bootstrap documentation sites.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Translations &middot; Bootstrap</title> <title>Translations · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Translations">
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Translations">
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/translations/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/about/translations/"> <meta property="og:title" content="Translations">
<meta property="og:title" content="Translations"> <meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -592,9 +386,11 @@
<li><a href="http://bootstrap.hexschool.com/" hreflang="zh-tw">Bootstrap 4 繁體中文手冊 (中文(繁體))</a></li> <li><a href="http://bootstrap.hexschool.com/" hreflang="zh-tw">Bootstrap 4 繁體中文手冊 (中文(繁體))</a></li>
<li><a href="http://code.z01.com/v4" hreflang="zh">Bootstrap 4 · 全球最流行的 HTML、CSS 和 JS 工具库。 (Chinese)</a></li>
<li><a href="http://wiki.jikexueyuan.com/project/bootstrap4/" hreflang="zh">Bootstrap 4 中文文档教程 (Chinese)</a></li> <li><a href="http://wiki.jikexueyuan.com/project/bootstrap4/" hreflang="zh">Bootstrap 4 中文文档教程 (Chinese)</a></li>
<li><a href="https://bootstrapbrasil.github.io/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li> <li><a href="http://getbootstrap.com.br/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li>
</ul> </ul>
@@ -609,20 +405,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -642,10 +425,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+93 -315
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Wall of browser bugs &middot; Bootstrap</title> <title>Wall of browser bugs · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Wall of browser bugs">
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Wall of browser bugs">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/browser-bugs/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/browser-bugs/"> <meta property="og:title" content="Wall of browser bugs">
<meta property="og:title" content="Wall of browser bugs"> <meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
<meta property="og:description" content=""> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -599,7 +393,7 @@
<li><a href="https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o">jQuerys browser bug workarounds</a></li> <li><a href="https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o">jQuerys browser bug workarounds</a></li>
</ul> </ul>
<table class="bd-browser-bugs table table-bordered table-hover table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Browser(s)</th> <th>Browser(s)</th>
@@ -1092,7 +886,7 @@
<p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p> <p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p>
<table class="bd-browser-bugs table table-bordered table-hover table-responsive"> <table class="bd-browser-bugs table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Browser(s)</th> <th>Browser(s)</th>
@@ -1278,20 +1072,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1311,10 +1092,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+93 -316
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Alerts &middot; Bootstrap</title> <title>Alerts · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Alerts">
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Alerts">
<meta name="twitter:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/alerts/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/alerts/"> <meta property="og:title" content="Alerts">
<meta property="og:title" content="Alerts"> <meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
<meta property="og:description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active"> <ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -584,7 +378,6 @@
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a> <li class="toc-entry toc-h2"><a href="#examples">Examples</a>
<ul> <ul>
<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
<li class="toc-entry toc-h3"><a href="#link-color">Link color</a></li> <li class="toc-entry toc-h3"><a href="#link-color">Link color</a></li>
<li class="toc-entry toc-h3"><a href="#additional-content">Additional content</a> <li class="toc-entry toc-h3"><a href="#additional-content">Additional content</a>
<ul> <ul>
@@ -666,7 +459,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4> <h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p> <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div> </div>
@@ -780,7 +573,7 @@
<p>Enable dismissal of an alert via JavaScript:</p> <p>Enable dismissal of an alert via JavaScript:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
<p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p> <p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
@@ -852,20 +645,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -885,10 +665,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+93 -319
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Badges &middot; Bootstrap</title> <title>Badges · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Badges">
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Badges">
<meta name="twitter:description" content="Documentation and examples for badges, our small count and labeling component.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/badge/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/badge/"> <meta property="og:title" content="Badges">
<meta property="og:title" content="Badges"> <meta property="og:description" content="Documentation and examples for badges, our small count and labeling component.">
<meta property="og:description" content="Documentation and examples for badges, our small count and labeling component."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -583,11 +377,7 @@
<div class="d-none d-xl-block col-xl-2 bd-toc"> <div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li> <li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#contextual-variations">Contextual variations</a> <li class="toc-entry toc-h2"><a href="#contextual-variations">Contextual variations</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li> <li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
<li class="toc-entry toc-h2"><a href="#links">Links</a></li> <li class="toc-entry toc-h2"><a href="#links">Links</a></li>
</ul> </ul>
@@ -669,7 +459,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/span&gt;</span></code></pre></div> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/span&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4> <h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p> <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div> </div>
@@ -728,20 +518,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -761,10 +538,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+98 -320
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Indicate the current pages location within a navigational hierarchy that automatically adds separators via CSS.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Breadcrumb &middot; Bootstrap</title> <title>Breadcrumb · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Breadcrumb">
<meta name="twitter:description" content="Indicate the current pages location within a navigational hierarchy that automatically adds separators via CSS.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Breadcrumb">
<meta name="twitter:description" content="Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> <meta property="og:title" content="Breadcrumb">
<meta property="og:title" content="Breadcrumb"> <meta property="og:description" content="Indicate the current pages location within a navigational hierarchy that automatically adds separators via CSS.">
<meta property="og:description" content="Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -583,7 +377,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Breadcrumb</h1> <h1 class="bd-title" id="content">Breadcrumb</h1>
<p class="bd-lead">Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.</p> <p class="bd-lead">Indicate the current pages location within a navigational hierarchy that automatically adds separators via CSS.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="overview">Overview</h2> <h2 id="overview">Overview</h2>
@@ -591,20 +385,20 @@
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>.</p> <p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>.</p>
<div class="bd-example"> <div class="bd-example">
<nav aria-label="breadcrumb" role="navigation"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li> <li class="breadcrumb-item active" aria-current="page">Home</li>
</ol> </ol>
</nav> </nav>
<nav aria-label="breadcrumb" role="navigation"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li> <li class="breadcrumb-item active" aria-current="page">Library</li>
</ol> </ol>
</nav> </nav>
<nav aria-label="breadcrumb" role="navigation"> <nav aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li>
@@ -612,20 +406,20 @@
</ol> </ol>
</nav> </nav>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span> <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span> <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span> <span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span> <span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span> <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span> <span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span> <span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span> <span class="na">role=</span><span class="s">"navigation"</span><span class="nt">&gt;</span> <span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span> <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
@@ -646,20 +440,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -679,10 +460,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+105 -323
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Button group &middot; Bootstrap</title> <title>Button group · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Button group">
<meta name="twitter:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Button group">
<meta name="twitter:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/button-group/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/button-group/"> <meta property="og:title" content="Button group">
<meta property="og:title" content="Button group"> <meta property="og:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
<meta property="og:description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -582,11 +376,7 @@
<div class="d-none d-xl-block col-xl-2 bd-toc"> <div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a> <li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#ensure-correct-role-and-provide-a-label">Ensure correct role and provide a label</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#button-toolbar">Button toolbar</a></li> <li class="toc-entry toc-h2"><a href="#button-toolbar">Button toolbar</a></li>
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li> <li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
<li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li> <li class="toc-entry toc-h2"><a href="#nesting">Nesting</a></li>
@@ -618,7 +408,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h4> <h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h5>
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p> <p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p>
@@ -675,7 +465,9 @@
<button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">4</button>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="btnGroupAddon">@</span> <div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" /> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
</div> </div>
</div> </div>
@@ -688,7 +480,9 @@
<button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">4</button>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="btnGroupAddon2">@</span> <div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" /> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
</div> </div>
</div> </div>
@@ -701,7 +495,9 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
@@ -714,7 +510,9 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
@@ -854,20 +652,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -887,10 +672,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+113 -343
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Use Bootstraps custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Buttons &middot; Bootstrap</title> <title>Buttons · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Buttons">
<meta name="twitter:description" content="Use Bootstraps custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Buttons">
<meta name="twitter:description" content="Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/buttons/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/buttons/"> <meta property="og:title" content="Buttons">
<meta property="og:title" content="Buttons"> <meta property="og:description" content="Use Bootstraps custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta property="og:description" content="Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -582,20 +376,12 @@
<div class="d-none d-xl-block col-xl-2 bd-toc"> <div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#examples">Examples</a> <li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#button-tags">Button tags</a></li> <li class="toc-entry toc-h2"><a href="#button-tags">Button tags</a></li>
<li class="toc-entry toc-h2"><a href="#outline-buttons">Outline buttons</a></li> <li class="toc-entry toc-h2"><a href="#outline-buttons">Outline buttons</a></li>
<li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li> <li class="toc-entry toc-h2"><a href="#sizes">Sizes</a></li>
<li class="toc-entry toc-h2"><a href="#active-state">Active state</a></li> <li class="toc-entry toc-h2"><a href="#active-state">Active state</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a> <li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#link-functionality-caveat">Link functionality caveat</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#button-plugin">Button plugin</a> <li class="toc-entry toc-h2"><a href="#button-plugin">Button plugin</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#toggle-states">Toggle states</a></li> <li class="toc-entry toc-h3"><a href="#toggle-states">Toggle states</a></li>
@@ -609,7 +395,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Buttons</h1> <h1 class="bd-title" id="content">Buttons</h1>
<p class="bd-lead">Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> <p class="bd-lead">Use Bootstraps custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="examples">Examples</h2> <h2 id="examples">Examples</h2>
@@ -640,7 +426,7 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/button&gt;</span></code></pre></div> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/button&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4> <h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p> <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div> </div>
@@ -752,7 +538,7 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre></div> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="link-functionality-caveat">Link functionality caveat</h4> <h5 id="link-functionality-caveat">Link functionality caveat</h5>
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge">&lt;a&gt;</code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p> <p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge">&lt;a&gt;</code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
</div> </div>
@@ -776,59 +562,59 @@
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3> <h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
<p>Bootstraps <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p> <p>Bootstraps <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge">&lt;input&gt;</code>s within your buttons.</p>
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge">&lt;input type="reset"&gt;</code> or by manually applying the inputs <code class="highlighter-rouge">checked</code> property—youll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge">&lt;label&gt;</code> manually.</p> <p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge">&lt;input type="reset"&gt;</code> or by manually applying the inputs <code class="highlighter-rouge">checked</code> property—youll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge">&lt;label&gt;</code> manually.</p>
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the inputs <code class="highlighter-rouge">&lt;label&gt;</code>.</p> <p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the inputs <code class="highlighter-rouge">&lt;label&gt;</code>.</p>
<div class="bd-example"> <div class="bd-example">
<div class="btn-group" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active"> <label class="btn btn-secondary active">
<input type="checkbox" checked="" autocomplete="off" /> Checkbox 1 (pre-checked) <input type="checkbox" checked="" autocomplete="off" /> Active
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" /> Checkbox 2 <input type="checkbox" autocomplete="off" /> Check
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" /> Checkbox 3 <input type="checkbox" autocomplete="off" /> Check
</label> </label>
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 1 (pre-checked) <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Active
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 2 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Check
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 3 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Check
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-example"> <div class="bd-example">
<div class="btn-group" data-toggle="buttons"> <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active"> <label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Radio 1 (preselected) <input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Active
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off" /> Radio 2 <input type="radio" name="options" id="option2" autocomplete="off" /> Radio
</label> </label>
<label class="btn btn-secondary"> <label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off" /> Radio 3 <input type="radio" name="options" id="option3" autocomplete="off" /> Radio
</label> </label>
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">&gt;</span> Radio 1 (preselected) <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">&gt;</span> Active
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio 2 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio 3 <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
@@ -860,20 +646,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -893,10 +666,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
File diff suppressed because it is too large Load Diff
+102 -331
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Carousel &middot; Bootstrap</title> <title>Carousel · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Carousel">
<meta name="twitter:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Carousel">
<meta name="twitter:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/carousel/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/carousel/"> <meta property="og:title" content="Carousel">
<meta property="og:title" content="Carousel"> <meta property="og:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
<meta property="og:description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -587,15 +381,8 @@
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#slides-only">Slides only</a></li> <li class="toc-entry toc-h3"><a href="#slides-only">Slides only</a></li>
<li class="toc-entry toc-h3"><a href="#with-controls">With controls</a></li> <li class="toc-entry toc-h3"><a href="#with-controls">With controls</a></li>
<li class="toc-entry toc-h3"><a href="#with-indicators">With indicators</a> <li class="toc-entry toc-h3"><a href="#with-indicators">With indicators</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#initial-active-element-required">Initial active element required</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#with-captions">With captions</a></li> <li class="toc-entry toc-h3"><a href="#with-captions">With captions</a></li>
<li class="toc-entry toc-h3"><a href="#first-slide-label">First slide label</a></li>
<li class="toc-entry toc-h3"><a href="#second-slide-label">Second slide label</a></li>
<li class="toc-entry toc-h3"><a href="#third-slide-label">Third slide label</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a> <li class="toc-entry toc-h2"><a href="#usage">Usage</a>
@@ -612,9 +399,9 @@
<li class="toc-entry toc-h4"><a href="#carouselnumber">.carousel(number)</a></li> <li class="toc-entry toc-h4"><a href="#carouselnumber">.carousel(number)</a></li>
<li class="toc-entry toc-h4"><a href="#carouselprev">.carousel('prev')</a></li> <li class="toc-entry toc-h4"><a href="#carouselprev">.carousel('prev')</a></li>
<li class="toc-entry toc-h4"><a href="#carouselnext">.carousel('next')</a></li> <li class="toc-entry toc-h4"><a href="#carouselnext">.carousel('next')</a></li>
<li class="toc-entry toc-h4"><a href="#carouseldispose">.carousel('dispose')</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h3"><a href="#carouseldispose">.carousel('dispose')</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul> </ul>
</li> </li>
@@ -635,7 +422,7 @@
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p> <p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
<p>Lastly, if youre building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p> <p>Lastly, if youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<h2 id="example">Example</h2> <h2 id="example">Example</h2>
@@ -785,7 +572,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="initial-active-element-required">Initial active element required</h4> <h5 id="initial-active-element-required">Initial active element required</h5>
<p>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p> <p>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
</div> </div>
@@ -805,21 +592,21 @@
<div class="carousel-item active"> <div class="carousel-item active">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide" /> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide" />
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3> <h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide" /> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide" />
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3> <h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide" /> <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide" />
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3> <h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div> </div>
</div> </div>
@@ -838,7 +625,7 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span> <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3&gt;</span>...<span class="nt">&lt;/h3&gt;</span> <span class="nt">&lt;h5&gt;</span>...<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;p&gt;</span>...<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;p&gt;</span>...<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure> <span class="nt">&lt;/div&gt;</span></code></pre></figure>
@@ -861,7 +648,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -943,7 +730,7 @@
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p> <p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<h3 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h3> <h4 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h4>
<p>Destroys an elements carousel.</p> <p>Destroys an elements carousel.</p>
@@ -960,7 +747,7 @@
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge">&lt;div class="carousel"&gt;</code>).</p> <p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge">&lt;div class="carousel"&gt;</code>).</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -991,20 +778,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1024,10 +798,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+111 -351
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Collapse &middot; Bootstrap</title> <title>Collapse · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Collapse">
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Collapse">
<meta name="twitter:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/collapse/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/collapse/"> <meta property="og:title" content="Collapse">
<meta property="og:title" content="Collapse"> <meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
<meta property="og:description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -584,25 +378,7 @@
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#example">Example</a></li> <li class="toc-entry toc-h2"><a href="#example">Example</a></li>
<li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li> <li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li>
<li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a> <li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-1--------------">
Collapsible Group Item #1
</a></li>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-2--------------">
Collapsible Group Item #2
</a></li>
<li class="toc-entry toc-h5"><a href="#------------------collapsible-group-item-3--------------">
Collapsible Group Item #3
</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li> <li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a> <li class="toc-entry toc-h2"><a href="#usage">Usage</a>
<ul> <ul>
@@ -616,9 +392,9 @@
<li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li> <li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
<li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li> <li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li> <li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h3"><a href="#collapsedispose">.collapse('dispose')</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul> </ul>
</li> </li>
@@ -645,7 +421,7 @@
<div class="bd-example"> <div class="bd-example">
<p> <p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href Link with href
</a> </a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -659,7 +435,7 @@
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
Link with href Link with href
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
@@ -679,7 +455,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="bd-example"> <div class="bd-example">
<p> <p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p> </p>
@@ -701,7 +477,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle both elements<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle both elements<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/p&gt;</span>
@@ -731,7 +507,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card"> <div class="card">
<div class="card-header" role="tab" id="headingOne"> <div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0"> <h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1 Collapsible Group Item #1
</a> </a>
</h5> </h5>
@@ -746,7 +522,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card"> <div class="card">
<div class="card-header" role="tab" id="headingTwo"> <div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0"> <h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2 Collapsible Group Item #2
</a> </a>
</h5> </h5>
@@ -760,7 +536,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="card"> <div class="card">
<div class="card-header" role="tab" id="headingThree"> <div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0"> <h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3 Collapsible Group Item #3
</a> </a>
</h5> </h5>
@@ -777,7 +553,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span> <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
Collapsible Group Item #1 Collapsible Group Item #1
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span> <span class="nt">&lt;/h5&gt;</span>
@@ -792,7 +568,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span> <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
Collapsible Group Item #2 Collapsible Group Item #2
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span> <span class="nt">&lt;/h5&gt;</span>
@@ -806,7 +582,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span> <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
Collapsible Group Item #3 Collapsible Group Item #3
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span> <span class="nt">&lt;/h5&gt;</span>
@@ -824,7 +600,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<div class="bd-example"> <div class="bd-example">
<div id="exampleAccordion" data-children=".item"> <div id="exampleAccordion" data-children=".item">
<div class="item"> <div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1"> <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" role="button" aria-expanded="true" aria-controls="exampleAccordion1">
Toggle item Toggle item
</a> </a>
<div id="exampleAccordion1" class="collapse show" role="tabpanel"> <div id="exampleAccordion1" class="collapse show" role="tabpanel">
@@ -834,7 +610,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2"> <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" role="button" aria-expanded="false" aria-controls="exampleAccordion2">
Toggle item 2 Toggle item 2
</a> </a>
<div id="exampleAccordion2" class="collapse" role="tabpanel"> <div id="exampleAccordion2" class="collapse" role="tabpanel">
@@ -847,7 +623,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion"</span> <span class="na">data-children=</span><span class="s">".item"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion"</span> <span class="na">data-children=</span><span class="s">".item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion1"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion1"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion1"</span><span class="nt">&gt;</span>
Toggle item Toggle item
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion1"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion1"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
@@ -857,7 +633,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion2"</span><span class="nt">&gt;</span> <span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion2"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion2"</span><span class="nt">&gt;</span>
Toggle item 2 Toggle item 2
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion2"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion2"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
@@ -870,7 +646,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<h2 id="accessibility">Accessibility</h2> <h2 id="accessibility">Accessibility</h2>
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If youve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element).</p> <p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If youve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control elements HTML element is not a button (e.g., an <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;div&gt;</code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
<p>Additionally, if your control element is targeting a single collapsible element i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector you may add an additional <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p> <p>Additionally, if your control element is targeting a single collapsible element i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector you may add an additional <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
@@ -902,7 +678,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -957,7 +733,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p> <p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
<h3 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h3> <h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
<p>Destroys an elements collapse.</p> <p>Destroys an elements collapse.</p>
@@ -965,7 +741,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Bootstraps collapse class exposes a few events for hooking into collapse functionality.</p> <p>Bootstraps collapse class exposes a few events for hooking into collapse functionality.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -1004,20 +780,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1037,10 +800,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+238 -338
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Dropdowns &middot; Bootstrap</title> <title>Dropdowns · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Dropdowns">
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Dropdowns">
<meta name="twitter:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/dropdowns/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/dropdowns/"> <meta property="og:title" content="Dropdowns">
<meta property="og:title" content="Dropdowns"> <meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
<meta property="og:description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -592,24 +386,18 @@
</li> </li>
<li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li> <li class="toc-entry toc-h2"><a href="#sizing">Sizing</a></li>
<li class="toc-entry toc-h2"><a href="#dropup-variation">Dropup variation</a></li> <li class="toc-entry toc-h2"><a href="#dropup-variation">Dropup variation</a></li>
<li class="toc-entry toc-h2"><a href="#dropright-variation">Dropright variation</a></li>
<li class="toc-entry toc-h2"><a href="#dropleft-variation">Dropleft variation</a></li>
<li class="toc-entry toc-h2"><a href="#menu-items">Menu items</a></li> <li class="toc-entry toc-h2"><a href="#menu-items">Menu items</a></li>
<li class="toc-entry toc-h2"><a href="#menu-alignment">Menu alignment</a></li> <li class="toc-entry toc-h2"><a href="#menu-alignment">Menu alignment</a></li>
<li class="toc-entry toc-h2"><a href="#menu-headers">Menu headers</a> <li class="toc-entry toc-h2"><a href="#menu-headers">Menu headers</a></li>
<ul>
<li class="toc-entry toc-h6"><a href="#dropdown-header">Dropdown header</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#menu-dividers">Menu dividers</a></li> <li class="toc-entry toc-h2"><a href="#menu-dividers">Menu dividers</a></li>
<li class="toc-entry toc-h2"><a href="#menu-forms">Menu forms</a></li> <li class="toc-entry toc-h2"><a href="#menu-forms">Menu forms</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-menu-items">Disabled menu items</a></li> <li class="toc-entry toc-h2"><a href="#disabled-menu-items">Disabled menu items</a></li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a> <li class="toc-entry toc-h2"><a href="#usage">Usage</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li> <li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
<li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a> <li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#data-toggledropdown-still-required">data-toggle="dropdown" still required</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#options">Options</a></li> <li class="toc-entry toc-h3"><a href="#options">Options</a></li>
<li class="toc-entry toc-h3"><a href="#methods">Methods</a></li> <li class="toc-entry toc-h3"><a href="#methods">Methods</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
@@ -628,9 +416,9 @@
<p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Theyre made interactive with the included Bootstrap dropdown JavaScript plugin. Theyre toggled by clicking, not by hovering; this is <a href="http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision.</a></p> <p>Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Theyre made interactive with the included Bootstrap dropdown JavaScript plugin. Theyre toggled by clicking, not by hovering; this is <a href="http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/">an intentional design decision.</a></p>
<p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">popper.min.js</a> before Bootstraps JavaScript or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js.</p> <p>Dropdowns are built on a third party library, <a href="https://popper.js.org/">Popper.js</a>, which provides dynamic positioning and viewport detection. Be sure to include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">popper.min.js</a> before Bootstraps JavaScript or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js. Popper.js isnt used to position dropdowns in navbars though as dynamic positioning isnt required.</p>
<p>If youre building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p> <p>If youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<h2 id="accessibility">Accessibility</h2> <h2 id="accessibility">Accessibility</h2>
@@ -1020,9 +808,8 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Default dropup button --&gt;</span> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Default dropup button --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropup"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Dropup<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle Dropdown<span class="nt">&lt;/span&gt;</span> Dropup
<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Dropdown menu links --&gt;</span> <span class="c">&lt;!-- Dropdown menu links --&gt;</span>
@@ -1042,6 +829,127 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure> <span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h2 id="dropright-variation">Dropright variation</h2>
<p>Trigger dropdown menus at the right of the elements by adding <code class="highlighter-rouge">.dropright</code> to the parent element.</p>
<div class="bd-example">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdright</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Default dropright button --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Dropright<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle Dropright<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Dropdown menu links --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Split dropright button --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
Split dropright
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle Dropright<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Dropdown menu links --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h2 id="dropleft-variation">Dropleft variation</h2>
<p>Trigger dropdown menus at the left of the elements by adding <code class="highlighter-rouge">.dropleft</code> to the parent element.</p>
<div class="bd-example">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Default dropleft button --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
Dropleft
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Dropdown menu links --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Split dropleft button --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group dropleft"</span> <span class="na">role=</span><span class="s">"group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Toggle Dropleft<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Dropdown menu links --&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
Split dropleft
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h2 id="menu-items">Menu items</h2> <h2 id="menu-items">Menu items</h2>
<p>Historically dropdown menu contents <em>had</em> to be links, but thats no longer the case with v4. Now you can optionally use <code class="highlighter-rouge">&lt;button&gt;</code> elements in your dropdowns instead of just <code class="highlighter-rouge">&lt;a&gt;</code>s.</p> <p>Historically dropdown menu contents <em>had</em> to be links, but thats no longer the case with v4. Now you can optionally use <code class="highlighter-rouge">&lt;button&gt;</code> elements in your dropdowns instead of just <code class="highlighter-rouge">&lt;a&gt;</code>s.</p>
@@ -1080,7 +988,7 @@
<div class="bd-example"> <div class="bd-example">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned Right-aligned menu
</button> </button>
<div class="dropdown-menu dropdown-menu-right"> <div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Action</button>
@@ -1091,7 +999,7 @@
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
This dropdown's menu is right-aligned Right-aligned menu
<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/button&gt;</span>
@@ -1154,8 +1062,8 @@
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" /> <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck" />
<input type="checkbox" class="form-check-input" /> <label class="form-check-label" for="dropdownCheck">
Remember me Remember me
</label> </label>
</div> </div>
@@ -1177,8 +1085,8 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck"</span><span class="nt">&gt;</span>
Remember me Remember me
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
@@ -1200,8 +1108,8 @@
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" /> <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" />
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <input type="checkbox" class="form-check-input" id="dropdownCheck2" />
<input type="checkbox" class="form-check-input" /> <label class="form-check-label" for="dropdownCheck2">
Remember me Remember me
</label> </label>
</div> </div>
@@ -1218,8 +1126,8 @@
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleDropdownFormPassword2"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">id=</span><span class="s">"dropdownCheck2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"dropdownCheck2"</span><span class="nt">&gt;</span>
Remember me Remember me
<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
@@ -1280,7 +1188,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -1302,9 +1210,17 @@
<td>true</td> <td>true</td>
<td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td> <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.enabled">flip docs</a>.</td>
</tr> </tr>
<tr>
<td>boundary</td>
<td>string | element</td>
<td>'scrollParent'</td>
<td>Overflow constraint boundary of the dropdown menu. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
</tbody> </tbody>
</table> </table>
<p>Note when <code class="highlighter-rouge">boundary</code> is set to any value other than <code class="highlighter-rouge">'scrollParent'</code>, the style <code class="highlighter-rouge">position: static</code> is applied to the <code class="highlighter-rouge">.dropdown</code> container.</p>
<h3 id="methods">Methods</h3> <h3 id="methods">Methods</h3>
<table> <table>
@@ -1373,20 +1289,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1406,10 +1309,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
File diff suppressed because it is too large Load Diff
+3 -2
View File
@@ -3,9 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap - Content moved</title> <title>Bootstrap · Content moved</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/components/buttons/"> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/components/buttons/">
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/components/buttons/"> <meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/components/buttons/">
<meta name="robots" content="noindex">
<style> <style>
html { html {
display: flex; display: flex;
@@ -30,7 +31,7 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Redirecting</h1> <h1>Redirecting&hellip;</h1>
<a href="https://getbootstrap.com/docs/4.0/components/buttons/">Click here if you are not redirected</a> <a href="https://getbootstrap.com/docs/4.0/components/buttons/">Click here if you are not redirected</a>
<script>window.location="https://getbootstrap.com/docs/4.0/components/buttons/";</script> <script>window.location="https://getbootstrap.com/docs/4.0/components/buttons/";</script>
</body> </body>
File diff suppressed because it is too large Load Diff
+95 -317
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Lightweight, flexible component for showcasing hero unit style content.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Jumbotron &middot; Bootstrap</title> <title>Jumbotron · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Jumbotron">
<meta name="twitter:description" content="Lightweight, flexible component for showcasing hero unit style content.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Jumbotron">
<meta name="twitter:description" content="Lightweight, flexible component for showcasing hero unit style content.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/jumbotron/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/jumbotron/"> <meta property="og:title" content="Jumbotron">
<meta property="og:title" content="Jumbotron"> <meta property="og:description" content="Lightweight, flexible component for showcasing hero unit style content.">
<meta property="og:description" content="Lightweight, flexible component for showcasing hero unit style content."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -590,7 +384,7 @@
<div class="bd-example"> <div class="bd-example">
<div class="jumbotron"> <div class="jumbotron">
<h1 class="display-3">Hello, world!</h1> <h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4" /> <hr class="my-4" />
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
@@ -600,7 +394,7 @@
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">&gt;</span> <span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>It uses utility classes for typography and spacing to space content out within the larger container.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;p&gt;</span>It uses utility classes for typography and spacing to space content out within the larger container.<span class="nt">&lt;/p&gt;</span>
@@ -614,14 +408,14 @@
<div class="bd-example"> <div class="bd-example">
<div class="jumbotron jumbotron-fluid"> <div class="jumbotron jumbotron-fluid">
<div class="container"> <div class="container">
<h1 class="display-3">Fluid jumbotron</h1> <h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron jumbotron-fluid"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron jumbotron-fluid"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Fluid jumbotron<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Fluid jumbotron<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a modified jumbotron that occupies the entire horizontal space of its parent.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a modified jumbotron that occupies the entire horizontal space of its parent.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
@@ -634,20 +428,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -667,10 +448,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+99 -331
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>List group &middot; Bootstrap</title> <title>List group · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="List group">
<meta name="twitter:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="List group">
<meta name="twitter:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/list-group/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/list-group/"> <meta property="og:title" content="List group">
<meta property="og:title" content="List group"> <meta property="og:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
<meta property="og:description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -586,19 +380,9 @@
<li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li> <li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-items">Disabled items</a></li> <li class="toc-entry toc-h2"><a href="#disabled-items">Disabled items</a></li>
<li class="toc-entry toc-h2"><a href="#links-and-buttons">Links and buttons</a></li> <li class="toc-entry toc-h2"><a href="#links-and-buttons">Links and buttons</a></li>
<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a> <li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li> <li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a> <li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading">List group item heading</a></li>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading-1">List group item heading</a></li>
<li class="toc-entry toc-h5"><a href="#list-group-item-heading-2">List group item heading</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a> <li class="toc-entry toc-h2"><a href="#javascript-behavior">JavaScript behavior</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#using-data-attributes">Using data attributes</a></li> <li class="toc-entry toc-h3"><a href="#using-data-attributes">Using data attributes</a></li>
@@ -800,7 +584,7 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div> <span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h4> <h5 id="conveying-meaning-to-assistive-technologies">Conveying meaning to assistive technologies</h5>
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p> <p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
</div> </div>
@@ -987,9 +771,9 @@
<p>You can activate individual list item in several ways:</p> <p>You can activate individual list item in several ways:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:first'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:first-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList li:eq(2) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab (0-indexed)</span></code></pre></figure> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:nth-child(3)'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
<h3 id="fade-effect">Fade effect</h3> <h3 id="fade-effect">Fade effect</h3>
@@ -1024,7 +808,7 @@
<span class="nt">&lt;script&gt;</span> <span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span> <span class="p">})</span>
<span class="nt">&lt;/script&gt;</span></code></pre></figure> <span class="nt">&lt;/script&gt;</span></code></pre></figure>
@@ -1047,7 +831,7 @@
<p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p> <p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event type</th> <th style="width: 150px;">Event type</th>
@@ -1087,20 +871,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1120,10 +891,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+160 -351
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Modal &middot; Bootstrap</title> <title>Modal · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Modal">
<meta name="twitter:description" content="Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Modal">
<meta name="twitter:description" content="Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/modal/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/modal/"> <meta property="og:title" content="Modal">
<meta property="og:title" content="Modal"> <meta property="og:description" content="Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<meta property="og:description" content="Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -585,38 +379,13 @@
<li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li> <li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
<li class="toc-entry toc-h2"><a href="#examples">Examples</a> <li class="toc-entry toc-h2"><a href="#examples">Examples</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#modal-components">Modal components</a> <li class="toc-entry toc-h3"><a href="#modal-components">Modal components</a></li>
<ul> <li class="toc-entry toc-h3"><a href="#live-demo">Live demo</a></li>
<li class="toc-entry toc-h5"><a href="#modal-title">Modal title</a></li> <li class="toc-entry toc-h3"><a href="#scrolling-long-content">Scrolling long content</a></li>
</ul> <li class="toc-entry toc-h3"><a href="#vertically-centered">Vertically centered</a></li>
</li> <li class="toc-entry toc-h3"><a href="#tooltips-and-popovers">Tooltips and popovers</a></li>
<li class="toc-entry toc-h3"><a href="#live-demo">Live demo</a> <li class="toc-entry toc-h3"><a href="#using-the-grid">Using the grid</a></li>
<ul> <li class="toc-entry toc-h3"><a href="#varying-modal-content">Varying modal content</a></li>
<li class="toc-entry toc-h5"><a href="#modal-title-1">Modal title</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#scrolling-long-content">Scrolling long content</a>
<ul>
<li class="toc-entry toc-h5"><a href="#modal-title-2">Modal title</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#tooltips-and-popovers">Tooltips and popovers</a>
<ul>
<li class="toc-entry toc-h5"><a href="#modal-title-3">Modal title</a></li>
<li class="toc-entry toc-h5"><a href="#popover-in-a-modal">Popover in a modal</a></li>
<li class="toc-entry toc-h5"><a href="#tooltips-in-a-modal">Tooltips in a modal</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#using-the-grid">Using the grid</a>
<ul>
<li class="toc-entry toc-h5"><a href="#grids-in-modals">Grids in modals</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#varying-modal-content">Varying modal content</a>
<ul>
<li class="toc-entry toc-h5"><a href="#new-message">New message</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#remove-animation">Remove animation</a></li> <li class="toc-entry toc-h3"><a href="#remove-animation">Remove animation</a></li>
<li class="toc-entry toc-h3"><a href="#dynamic-heights">Dynamic heights</a></li> <li class="toc-entry toc-h3"><a href="#dynamic-heights">Dynamic heights</a></li>
<li class="toc-entry toc-h3"><a href="#accessibility">Accessibility</a></li> <li class="toc-entry toc-h3"><a href="#accessibility">Accessibility</a></li>
@@ -642,9 +411,9 @@
<li class="toc-entry toc-h4"><a href="#modalshow">.modal('show')</a></li> <li class="toc-entry toc-h4"><a href="#modalshow">.modal('show')</a></li>
<li class="toc-entry toc-h4"><a href="#modalhide">.modal('hide')</a></li> <li class="toc-entry toc-h4"><a href="#modalhide">.modal('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#modalhandleupdate">.modal('handleUpdate')</a></li> <li class="toc-entry toc-h4"><a href="#modalhandleupdate">.modal('handleUpdate')</a></li>
<li class="toc-entry toc-h4"><a href="#modaldispose">.modal('dispose')</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h3"><a href="#modaldispose">.modal('dispose')</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul> </ul>
</li> </li>
@@ -654,7 +423,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Modal</h1> <h1 class="bd-title" id="content">Modal</h1>
<p class="bd-lead">Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p> <p class="bd-lead">Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2> <h2 id="how-it-works">How it works</h2>
@@ -853,6 +622,62 @@
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure> <span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="vertically-centered">Vertically centered</h3>
<p>Add <code class="highlighter-rouge">.modal-dialog-centered</code> to <code class="highlighter-rouge">.modal-dialog</code> to vertically center the modal.</p>
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModalCenter"</span><span class="nt">&gt;</span>
Launch demo modal
<span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Modal --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModalCenter"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalCenterTitle"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLongTitle"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="tooltips-and-popovers">Tooltips and popovers</h3> <h3 id="tooltips-and-popovers">Tooltips and popovers</h3>
<p><a href="/docs/4.0/components/tooltips/">Tooltips</a> and <a href="/docs/4.0/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p> <p><a href="/docs/4.0/components/tooltips/">Tooltips</a> and <a href="/docs/4.0/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
@@ -1070,7 +895,7 @@
<h3 id="dynamic-heights">Dynamic heights</h3> <h3 id="dynamic-heights">Dynamic heights</h3>
<p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').data('bs.modal').handleUpdate()</code> or <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modals position in case a scrollbar appears.</p> <p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modals position in case a scrollbar appears.</p>
<h3 id="accessibility">Accessibility</h3> <h3 id="accessibility">Accessibility</h3>
@@ -1164,7 +989,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -1243,7 +1068,7 @@
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre></figure> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre></figure>
<h3 id="modaldispose"><code class="highlighter-rouge">.modal('dispose')</code></h3> <h4 id="modaldispose"><code class="highlighter-rouge">.modal('dispose')</code></h4>
<p>Destroys an elements modal.</p> <p>Destroys an elements modal.</p>
@@ -1251,7 +1076,7 @@
<p>Bootstraps modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge">&lt;div class="modal"&gt;</code>).</p> <p>Bootstraps modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge">&lt;div class="modal"&gt;</code>).</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -1290,20 +1115,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1323,10 +1135,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+98 -316
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for Bootstraps powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Navbar &middot; Bootstrap</title> <title>Navbar · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Navbar">
<meta name="twitter:description" content="Documentation and examples for Bootstraps powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Navbar">
<meta name="twitter:description" content="Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navbar/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navbar/"> <meta property="og:title" content="Navbar">
<meta property="og:title" content="Navbar"> <meta property="og:description" content="Documentation and examples for Bootstraps powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
<meta property="og:description" content="Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -610,7 +404,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navbar</h1> <h1 class="bd-title" id="content">Navbar</h1>
<p class="bd-lead">Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.</p> <p class="bd-lead">Documentation and examples for Bootstraps powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="how-it-works">How it works</h2> <h2 id="how-it-works">How it works</h2>
@@ -970,7 +764,9 @@
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span> <div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" /> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div> </div>
</form> </form>
@@ -979,7 +775,9 @@
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span> <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span> <span class="nt">&lt;/form&gt;</span>
@@ -1452,20 +1250,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1485,10 +1270,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+114 -332
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for how to use Bootstraps included navigation components.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Navs &middot; Bootstrap</title> <title>Navs · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Navs">
<meta name="twitter:description" content="Documentation and examples for how to use Bootstraps included navigation components.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Navs">
<meta name="twitter:description" content="Documentation and examples for how to use Bootstrap's included navigation components.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navs/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/navs/"> <meta property="og:title" content="Navs">
<meta property="og:title" content="Navs"> <meta property="og:description" content="Documentation and examples for how to use Bootstraps included navigation components.">
<meta property="og:description" content="Documentation and examples for how to use Bootstrap's included navigation components."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -610,9 +404,9 @@
<li class="toc-entry toc-h4"><a href="#asynchronous-methods-and-transitions">Asynchronous methods and transitions</a></li> <li class="toc-entry toc-h4"><a href="#asynchronous-methods-and-transitions">Asynchronous methods and transitions</a></li>
<li class="toc-entry toc-h4"><a href="#tab">$().tab</a></li> <li class="toc-entry toc-h4"><a href="#tab">$().tab</a></li>
<li class="toc-entry toc-h4"><a href="#tabshow">.tab(show)</a></li> <li class="toc-entry toc-h4"><a href="#tabshow">.tab(show)</a></li>
<li class="toc-entry toc-h4"><a href="#tabdispose">.tab(dispose)</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h3"><a href="#tabdispose">.tab(dispose)</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul> </ul>
</li> </li>
@@ -622,7 +416,7 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Navs</h1> <h1 class="bd-title" id="content">Navs</h1>
<p class="bd-lead">Documentation and examples for how to use Bootstrap's included navigation components.</p> <p class="bd-lead">Documentation and examples for how to use Bootstraps included navigation components.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<h2 id="base-nav">Base nav</h2> <h2 id="base-nav">Base nav</h2>
@@ -988,7 +782,7 @@
<p>If youre using navs to provide a navigation bar, be sure to add a <code class="highlighter-rouge">role="navigation"</code> to the most logical parent container of the <code class="highlighter-rouge">&lt;ul&gt;</code>, or wrap a <code class="highlighter-rouge">&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code class="highlighter-rouge">&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p> <p>If youre using navs to provide a navigation bar, be sure to add a <code class="highlighter-rouge">role="navigation"</code> to the most logical parent container of the <code class="highlighter-rouge">&lt;ul&gt;</code>, or wrap a <code class="highlighter-rouge">&lt;nav&gt;</code> element around the whole navigation. Do not add the role to the <code class="highlighter-rouge">&lt;ul&gt;</code> itself, as this would prevent it from being announced as an actual list by assistive technologies.</p>
<p>Note that navigation bars, even if visually styled as tabs with the <code class="highlighter-rouge">.nav-tabs</code> class, should <strong>not</strong> be given <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code> or <code class="highlighter-rouge">role="tabpanel"</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior-for-dynamic-tabbed-interfaces">JavaScript behavior for dynamic tabbed interfaces</a> in this section for an example.</p> <p>Note that navigation bars, even if visually styled as tabs with the <code class="highlighter-rouge">.nav-tabs</code> class, should <strong>not</strong> be given <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code> or <code class="highlighter-rouge">role="tabpanel"</code> attributes. These are only appropriate for dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>. See <a href="#javascript-behavior">JavaScript behavior</a> for dynamic tabbed interfaces in this section for an example.</p>
<h2 id="using-dropdowns">Using dropdowns</h2> <h2 id="using-dropdowns">Using dropdowns</h2>
@@ -1092,7 +886,7 @@
<p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.</p> <p>Use the tab JavaScript plugin—include it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.</p>
<p>If youre building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p> <p>If youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code>, <code class="highlighter-rouge">role="tabpanel"</code>, and additional <code class="highlighter-rouge">aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p> <p>Dynamic tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>, require <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code>, <code class="highlighter-rouge">role="tabpanel"</code>, and additional <code class="highlighter-rouge">aria-</code> attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).</p>
@@ -1140,13 +934,15 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"contact-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"contact"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"contact-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure> <span class="nt">&lt;/div&gt;</span></code></pre></figure>
<p>To help fit your needs, this works with <code class="highlighter-rouge">&lt;ul&gt;</code>-based markup, as shown above, as well as <code class="highlighter-rouge">&lt;nav&gt;</code>-based markup shown below.</p> <p>To help fit your needs, this works with <code class="highlighter-rouge">&lt;ul&gt;</code>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if youre using <code class="highlighter-rouge">&lt;nav&gt;</code>, you shouldnt add <code class="highlighter-rouge">role="tablist"</code> directly to it, as this would override the elements native role as a navigation landmark. Instead, switch to an alternative element (in the exammple below, a simple <code class="highlighter-rouge">&lt;div&gt;</code>) and wrap the <code class="highlighter-rouge">&lt;nav&gt;</code> around it.</p>
<div class="bd-example bd-example-tabs"> <div class="bd-example bd-example-tabs">
<nav class="nav nav-tabs" id="nav-tab" role="tablist"> <nav>
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav> </nav>
<div class="tab-content" id="nav-tabContent"> <div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
@@ -1161,10 +957,12 @@
</div> </div>
</div> </div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">id=</span><span class="s">"nav-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"nav-tab"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link active"</span> <span class="na">id=</span><span class="s">"nav-home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-item nav-link"</span> <span class="na">id=</span><span class="s">"nav-contact-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#nav-contact"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"nav-contact"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">&gt;</span>Contact<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span> <span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span> <span class="na">id=</span><span class="s">"nav-tabContent"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"nav-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"nav-home-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-pane fade show active"</span> <span class="na">id=</span><span class="s">"nav-home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"nav-home-tab"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
@@ -1300,9 +1098,9 @@
<p>You can activate individual tabs in several ways:</p> <p>You can activate individual tabs in several ways:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:first'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:first-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:last-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:eq(2) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab (0-indexed)</span></code></pre></figure> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:nth-child(3) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
<h3 id="fade-effect">Fade effect</h3> <h3 id="fade-effect">Fade effect</h3>
@@ -1353,7 +1151,7 @@
<span class="nt">&lt;script&gt;</span> <span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:last-child a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span> <span class="p">})</span>
<span class="nt">&lt;/script&gt;</span></code></pre></figure> <span class="nt">&lt;/script&gt;</span></code></pre></figure>
@@ -1363,7 +1161,7 @@
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#someTab'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure> <figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#someTab'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></figure>
<h3 id="tabdispose">.tab(dispose)</h3> <h4 id="tabdispose">.tab(dispose)</h4>
<p>Destroys an elements tab.</p> <p>Destroys an elements tab.</p>
@@ -1380,7 +1178,7 @@
<p>If no tab was already active, then the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p> <p>If no tab was already active, then the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -1420,20 +1218,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1453,10 +1238,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+95 -333
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Pagination &middot; Bootstrap</title> <title>Pagination · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Pagination">
<meta name="twitter:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Pagination">
<meta name="twitter:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/pagination/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/pagination/"> <meta property="og:title" content="Pagination">
<meta property="og:title" content="Pagination"> <meta property="og:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta property="og:description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -756,28 +550,20 @@
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-lg"> <ul class="pagination pagination-lg">
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a> <a class="page-link" href="#" tabindex="-1">1</a>
</li> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-lg"</span><span class="nt">&gt;</span> <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div> <span class="nt">&lt;/nav&gt;</span></code></pre></div>
@@ -785,28 +571,20 @@
<nav aria-label="..."> <nav aria-label="...">
<ul class="pagination pagination-sm"> <ul class="pagination pagination-sm">
<li class="page-item disabled"> <li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a> <a class="page-link" href="#" tabindex="-1">1</a>
</li> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-sm"</span><span class="nt">&gt;</span> <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span> <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span> <span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div> <span class="nt">&lt;/nav&gt;</span></code></pre></div>
@@ -880,20 +658,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -913,10 +678,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+105 -367
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Popovers &middot; Bootstrap</title> <title>Popovers · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Popovers">
<meta name="twitter:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Popovers">
<meta name="twitter:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/popovers/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/popovers/"> <meta property="og:title" content="Popovers">
<meta property="og:title" content="Popovers"> <meta property="og:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<meta property="og:description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -585,15 +379,7 @@
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li> <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#example-enable-popovers-everywhere">Example: Enable popovers everywhere</a></li> <li class="toc-entry toc-h2"><a href="#example-enable-popovers-everywhere">Example: Enable popovers everywhere</a></li>
<li class="toc-entry toc-h2"><a href="#example-using-the-container-option">Example: Using the container option</a></li> <li class="toc-entry toc-h2"><a href="#example-using-the-container-option">Example: Using the container option</a></li>
<li class="toc-entry toc-h2"><a href="#static-popover">Static popover</a> <li class="toc-entry toc-h2"><a href="#example">Example</a>
<ul>
<li class="toc-entry toc-h3"><a href="#popover-top">Popover top</a></li>
<li class="toc-entry toc-h3"><a href="#popover-right">Popover right</a></li>
<li class="toc-entry toc-h3"><a href="#popover-bottom">Popover bottom</a></li>
<li class="toc-entry toc-h3"><a href="#popover-left">Popover left</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#live-demo">Live demo</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#four-directions">Four directions</a></li> <li class="toc-entry toc-h3"><a href="#four-directions">Four directions</a></li>
<li class="toc-entry toc-h3"><a href="#dismiss-on-next-click">Dismiss on next click</a> <li class="toc-entry toc-h3"><a href="#dismiss-on-next-click">Dismiss on next click</a>
@@ -641,9 +427,9 @@
<p>Things to know when using the popover plugin:</p> <p>Things to know when using the popover plugin:</p>
<ul> <ul>
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li> <li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
<li>Popovers require the <a href="/docs/4.0/components/tooltips/">tooltip plugin</a> as a dependency.</li> <li>Popovers require the <a href="/docs/4.0/components/tooltips/">tooltip plugin</a> as a dependency.</li>
<li>If building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li> <li>If youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li> <li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Zero-length <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">content</code> values will never show a popover.</li> <li>Zero-length <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">content</code> values will never show a popover.</li>
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li> <li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
@@ -673,47 +459,7 @@
<span class="p">})</span> <span class="p">})</span>
<span class="p">})</span></code></pre></figure> <span class="p">})</span></code></pre></figure>
<h2 id="static-popover">Static popover</h2> <h2 id="example">Example</h2>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example bd-example-popover-static">
<div class="popover bs-popover-top bs-popover-top-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover top</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-right bs-popover-right-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover right</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover bottom</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-left bs-popover-left-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover left</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<h2 id="live-demo">Live demo</h2>
<div class="bd-example"> <div class="bd-example">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
@@ -722,6 +468,8 @@
<h3 id="four-directions">Four directions</h3> <h3 id="four-directions">Four directions</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example popover-demo"> <div class="bd-example popover-demo">
<div class="bd-example-popovers"> <div class="bd-example-popovers">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
@@ -785,7 +533,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -889,6 +637,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<td>Allow to specify which position Popper will use on fallback. For more information refer to <td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td> Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
</tr> </tr>
<tr>
<td>boundary</td>
<td>string | element</td>
<td>'scrollParent'</td>
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
</tbody> </tbody>
</table> </table>
@@ -962,7 +716,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="events">Events</h3> <h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -1005,20 +759,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1038,10 +779,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+91 -313
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Progress &middot; Bootstrap</title> <title>Progress · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Progress">
<meta name="twitter:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Progress">
<meta name="twitter:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/progress/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/progress/"> <meta property="og:title" content="Progress">
<meta property="og:title" content="Progress"> <meta property="og:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
<meta property="og:description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -799,20 +593,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -832,10 +613,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+98 -330
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Scrollspy &middot; Bootstrap</title> <title>Scrollspy · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Scrollspy">
<meta name="twitter:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Scrollspy">
<meta name="twitter:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/scrollspy/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/scrollspy/"> <meta property="og:title" content="Scrollspy">
<meta property="og:title" content="Scrollspy"> <meta property="og:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
<meta property="og:description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -594,19 +388,9 @@
</li> </li>
<li class="toc-entry toc-h2"><a href="#example-with-nested-nav">Example with nested nav</a> <li class="toc-entry toc-h2"><a href="#example-with-nested-nav">Example with nested nav</a>
<ul> <ul>
<li class="toc-entry toc-h4"><a href="#item-1">Item 1</a> <li class="toc-entry toc-h4"><a href="#item-1">Item 1</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#item-1-1">Item 1-1</a></li>
<li class="toc-entry toc-h5"><a href="#item-2-2">Item 2-2</a></li>
</ul>
</li>
<li class="toc-entry toc-h4"><a href="#item-2">Item 2</a></li> <li class="toc-entry toc-h4"><a href="#item-2">Item 2</a></li>
<li class="toc-entry toc-h4"><a href="#item-3">Item 3</a> <li class="toc-entry toc-h4"><a href="#item-3">Item 3</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#item-3-1">Item 3-1</a></li>
<li class="toc-entry toc-h5"><a href="#item-3-2">Item 3-2</a></li>
</ul>
</li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h2"><a href="#example-with-list-group">Example with list-group</a> <li class="toc-entry toc-h2"><a href="#example-with-list-group">Example with list-group</a>
@@ -629,9 +413,9 @@
<li class="toc-entry toc-h3"><a href="#methods">Methods</a> <li class="toc-entry toc-h3"><a href="#methods">Methods</a>
<ul> <ul>
<li class="toc-entry toc-h4"><a href="#scrollspyrefresh">.scrollspy('refresh')</a></li> <li class="toc-entry toc-h4"><a href="#scrollspyrefresh">.scrollspy('refresh')</a></li>
<li class="toc-entry toc-h4"><a href="#scrollspydispose">.scrollspy('dispose')</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h3"><a href="#scrollspydispose">.scrollspy('dispose')</a></li>
<li class="toc-entry toc-h3"><a href="#options">Options</a></li> <li class="toc-entry toc-h3"><a href="#options">Options</a></li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li> <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
</ul> </ul>
@@ -650,7 +434,7 @@
<p>Scrollspy has a few requirements to function properly:</p> <p>Scrollspy has a few requirements to function properly:</p>
<ul> <ul>
<li>If building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li> <li>If youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>It must be used on a Bootstrap <a href="/docs/4.0/components/navs/">nav component</a> or <a href="/docs/4.0/components/list-group/">list group</a>.</li> <li>It must be used on a Bootstrap <a href="/docs/4.0/components/navs/">nav component</a> or <a href="/docs/4.0/components/list-group/">list group</a>.</li>
<li>Scrollspy requires <code class="highlighter-rouge">position: relative;</code> on the element youre spying on, usually the <code class="highlighter-rouge">&lt;body&gt;</code>.</li> <li>Scrollspy requires <code class="highlighter-rouge">position: relative;</code> on the element youre spying on, usually the <code class="highlighter-rouge">&lt;body&gt;</code>.</li>
<li>When spying on elements other than the <code class="highlighter-rouge">&lt;body&gt;</code>, be sure to have a <code class="highlighter-rouge">height</code> set and <code class="highlighter-rouge">overflow-y: scroll;</code> applied.</li> <li>When spying on elements other than the <code class="highlighter-rouge">&lt;body&gt;</code>, be sure to have a <code class="highlighter-rouge">height</code> set and <code class="highlighter-rouge">overflow-y: scroll;</code> applied.</li>
@@ -906,7 +690,7 @@
<span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure> <span class="p">})</span></code></pre></figure>
<h3 id="scrollspydispose"><code class="highlighter-rouge">.scrollspy('dispose')</code></h3> <h4 id="scrollspydispose"><code class="highlighter-rouge">.scrollspy('dispose')</code></h4>
<p>Destroys an elements scrollspy.</p> <p>Destroys an elements scrollspy.</p>
@@ -914,7 +698,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -935,7 +719,7 @@
<h3 id="events">Events</h3> <h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -962,20 +746,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -995,10 +766,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+105 -363
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Tooltips &middot; Bootstrap</title> <title>Tooltips · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Tooltips">
<meta name="twitter:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Tooltips">
<meta name="twitter:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/tooltips/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/components/tooltips/"> <meta property="og:title" content="Tooltips">
<meta property="og:title" content="Tooltips"> <meta property="og:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
<meta property="og:description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -584,19 +378,10 @@
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li> <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</a></li> <li class="toc-entry toc-h2"><a href="#example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</a></li>
<li class="toc-entry toc-h2"><a href="#examples">Examples</a> <li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
<ul>
<li class="toc-entry toc-h3"><a href="#static-demo">Static demo</a></li>
<li class="toc-entry toc-h3"><a href="#interactive-demo">Interactive demo</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a> <li class="toc-entry toc-h2"><a href="#usage">Usage</a>
<ul> <ul>
<li class="toc-entry toc-h3"><a href="#markup">Markup</a> <li class="toc-entry toc-h3"><a href="#markup">Markup</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#options">Options</a> <li class="toc-entry toc-h3"><a href="#options">Options</a>
<ul> <ul>
<li class="toc-entry toc-h4"><a href="#data-attributes-for-individual-tooltips">Data attributes for individual tooltips</a></li> <li class="toc-entry toc-h4"><a href="#data-attributes-for-individual-tooltips">Data attributes for individual tooltips</a></li>
@@ -633,8 +418,8 @@
<p>Things to know when using the tooltip plugin:</p> <p>Things to know when using the tooltip plugin:</p>
<ul> <ul>
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for tooltips to work!</li> <li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for tooltips to work!</li>
<li>If building our JS from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li> <li>If youre building our JavaScript from source, it <a href="/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li> <li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Tooltips with zero-length titles are never displayed.</li> <li>Tooltips with zero-length titles are never displayed.</li>
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li> <li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
@@ -663,40 +448,7 @@
</p> </p>
</div> </div>
<h3 id="static-demo">Static demo</h3> <p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.</p>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
</div>
<h3 id="interactive-demo">Interactive demo</h3>
<p>Hover over the buttons below to see their tooltips.</p>
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">
<div class="bd-example-tooltips"> <div class="bd-example-tooltips">
@@ -740,7 +492,7 @@
<p>The required markup for a tooltip is only a <code class="highlighter-rouge">data</code> attribute and <code class="highlighter-rouge">title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code class="highlighter-rouge">top</code> by the plugin).</p> <p>The required markup for a tooltip is only a <code class="highlighter-rouge">data</code> attribute and <code class="highlighter-rouge">title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code class="highlighter-rouge">top</code> by the plugin).</p>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h4> <h5 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h5>
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="highlighter-rouge">&lt;span&gt;</code>s) can be made focusable by adding the <code class="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.</p> <p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="highlighter-rouge">&lt;span&gt;</code>s) can be made focusable by adding the <code class="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.</p>
</div> </div>
@@ -760,7 +512,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 100px;">Name</th> <th style="width: 100px;">Name</th>
@@ -858,6 +610,12 @@
<td>Allow to specify which position Popper will use on fallback. For more information refer to <td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td> Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
</tr> </tr>
<tr>
<td>boundary</td>
<td>string | element</td>
<td>'scrollParent'</td>
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
</tbody> </tbody>
</table> </table>
@@ -931,7 +689,7 @@
<h3 id="events">Events</h3> <h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
<th style="width: 150px;">Event Type</th> <th style="width: 150px;">Event Type</th>
@@ -974,20 +732,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1007,10 +752,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+91 -313
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Code &middot; Bootstrap</title> <title>Code · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Code">
<meta name="twitter:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Code">
<meta name="twitter:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/code/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/code/"> <meta property="og:title" content="Code">
<meta property="og:title" content="Code"> <meta property="og:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
<meta property="og:description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -655,20 +449,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -688,10 +469,7 @@ To edit settings, press <span class="nt">&lt;kbd&gt;&lt;kbd&gt;</span>ctrl<span
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+91 -313
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Figures &middot; Bootstrap</title> <title>Figures · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Figures">
<meta name="twitter:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Figures">
<meta name="twitter:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/figures/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/figures/"> <meta property="og:title" content="Figures">
<meta property="og:title" content="Figures"> <meta property="og:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
<meta property="og:description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -622,20 +416,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -655,10 +436,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+93 -319
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Images &middot; Bootstrap</title> <title>Images · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Images">
<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Images">
<meta name="twitter:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/images/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/images/"> <meta property="og:title" content="Images">
<meta property="og:title" content="Images"> <meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
<meta property="og:description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -582,11 +376,7 @@
<div class="d-none d-xl-block col-xl-2 bd-toc"> <div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav"> <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a> <li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#svg-images-and-ie-10">SVG images and IE 10</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#image-thumbnails">Image thumbnails</a></li> <li class="toc-entry toc-h2"><a href="#image-thumbnails">Image thumbnails</a></li>
<li class="toc-entry toc-h2"><a href="#aligning-images">Aligning images</a></li> <li class="toc-entry toc-h2"><a href="#aligning-images">Aligning images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li> <li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
@@ -610,7 +400,7 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre></figure> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="svg-images-and-ie-10">SVG images and IE 10</h4> <h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesnt apply it automatically.</p> <p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesnt apply it automatically.</p>
</div> </div>
@@ -670,20 +460,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -703,10 +480,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+3 -2
View File
@@ -3,9 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap - Content moved</title> <title>Bootstrap · Content moved</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/content/reboot/"> <link rel="canonical" href="https://getbootstrap.com/docs/4.0/content/reboot/">
<meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/content/reboot/"> <meta http-equiv="refresh" content="0; url=https://getbootstrap.com/docs/4.0/content/reboot/">
<meta name="robots" content="noindex">
<style> <style>
html { html {
display: flex; display: flex;
@@ -30,7 +31,7 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Redirecting</h1> <h1>Redirecting&hellip;</h1>
<a href="https://getbootstrap.com/docs/4.0/content/reboot/">Click here if you are not redirected</a> <a href="https://getbootstrap.com/docs/4.0/content/reboot/">Click here if you are not redirected</a>
<script>window.location="https://getbootstrap.com/docs/4.0/content/reboot/";</script> <script>window.location="https://getbootstrap.com/docs/4.0/content/reboot/";</script>
</body> </body>
+117 -321
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Reboot &middot; Bootstrap</title> <title>Reboot · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Reboot">
<meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Reboot">
<meta name="twitter:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/reboot/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/reboot/"> <meta property="og:title" content="Reboot">
<meta property="og:title" content="Reboot"> <meta property="og:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
<meta property="og:description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active"> <ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -595,13 +389,10 @@
<li class="toc-entry toc-h3"><a href="#address">Address</a></li> <li class="toc-entry toc-h3"><a href="#address">Address</a></li>
<li class="toc-entry toc-h3"><a href="#blockquote">Blockquote</a></li> <li class="toc-entry toc-h3"><a href="#blockquote">Blockquote</a></li>
<li class="toc-entry toc-h3"><a href="#inline-elements">Inline elements</a></li> <li class="toc-entry toc-h3"><a href="#inline-elements">Inline elements</a></li>
<li class="toc-entry toc-h3"><a href="#summary">Summary</a></li>
</ul> </ul>
</li> </li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a> <li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
<ul>
<li class="toc-entry toc-h4"><a href="#jquery-incompatibility">jQuery incompatibility</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#click-delay-optimization-for-touch">Click delay optimization for touch</a></li> <li class="toc-entry toc-h2"><a href="#click-delay-optimization-for-touch">Click delay optimization for touch</a></li>
</ul> </ul>
</div> </div>
@@ -891,8 +682,13 @@
</p> </p>
<p> <p>
<label for="time">Example temporal</label> <label for="date">Example date</label>
<input type="datetime-local" id="time" /> <input type="date" id="date" />
</p>
<p>
<label for="time">Example time</label>
<input type="time" id="time" />
</p> </p>
<p> <p>
@@ -953,6 +749,22 @@
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div> </div>
<h3 id="summary">Summary</h3>
<p>The default <code class="highlighter-rouge">cursor</code> on summary is <code class="highlighter-rouge">text</code>, so we reset that to <code class="highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<div class="bd-example">
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<details open="">
<summary>Even more details</summary>
<p>Here are even more details about the details.</p>
</details>
</div>
<h2 id="html5-hidden-attribute">HTML5 <code class="highlighter-rouge">[hidden]</code> attribute</h2> <h2 id="html5-hidden-attribute">HTML5 <code class="highlighter-rouge">[hidden]</code> attribute</h2>
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isnt natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p> <p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isnt natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
@@ -960,7 +772,7 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">&gt;</span></code></pre></figure> <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning"> <div class="bd-callout bd-callout-warning">
<h4 id="jquery-incompatibility">jQuery incompatibility</h4> <h5 id="jquery-incompatibility">jQuery incompatibility</h5>
<p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuerys <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Therefore, we dont currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p> <p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuerys <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Therefore, we dont currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p>
</div> </div>
@@ -988,20 +800,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1021,10 +820,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
File diff suppressed because it is too large Load Diff
+92 -314
View File
@@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Typography &middot; Bootstrap</title> <title>Typography · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
<link href="/assets/css/docs.min.css" rel="stylesheet"> <link href="/assets/css/docs.min.css" rel="stylesheet">
@@ -29,28 +31,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Typography">
<meta name="twitter:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Typography">
<meta name="twitter:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/typography/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/content/typography/"> <meta property="og:title" content="Typography">
<meta property="og:title" content="Typography"> <meta property="og:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
<meta property="og:description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -76,10 +69,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -121,26 +112,20 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
@@ -149,10 +134,8 @@
<div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<form class="bd-search d-flex align-items-center"> <form class="bd-search d-flex align-items-center">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off"> <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"> <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg> </button>
</button>
</form> </form>
<nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item"> <nav class="collapse bd-links" id="bd-docs-nav"><div class="bd-toc-item">
@@ -163,58 +146,31 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/getting-started/introduction/"> <a href="/docs/4.0/getting-started/introduction/">
Introduction Introduction
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/download/"> <a href="/docs/4.0/getting-started/download/">
Download Download
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/contents/"> <a href="/docs/4.0/getting-started/contents/">
Contents Contents
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/browsers-devices/"> <a href="/docs/4.0/getting-started/browsers-devices/">
Browsers & devices Browsers & devices
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/javascript/"> <a href="/docs/4.0/getting-started/javascript/">
JavaScript JavaScript
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/theming/"> <a href="/docs/4.0/getting-started/theming/">
Theming Theming
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/build-tools/"> <a href="/docs/4.0/getting-started/build-tools/">
Build tools Build tools
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/webpack/"> <a href="/docs/4.0/getting-started/webpack/">
Webpack Webpack
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/getting-started/accessibility/"> <a href="/docs/4.0/getting-started/accessibility/">
Accessibility Accessibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/layout/overview/"> <a class="bd-toc-link" href="/docs/4.0/layout/overview/">
Layout Layout
@@ -223,28 +179,16 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/layout/overview/"> <a href="/docs/4.0/layout/overview/">
Overview Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/grid/"> <a href="/docs/4.0/layout/grid/">
Grid Grid
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/media-object/"> <a href="/docs/4.0/layout/media-object/">
Media object Media object
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/layout/utilities-for-layout/"> <a href="/docs/4.0/layout/utilities-for-layout/">
Utilities for layout Utilities for layout
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item active"> </div><div class="bd-toc-item active">
<a class="bd-toc-link" href="/docs/4.0/content/reboot/"> <a class="bd-toc-link" href="/docs/4.0/content/reboot/">
Content Content
@@ -253,40 +197,22 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/content/reboot/"> <a href="/docs/4.0/content/reboot/">
Reboot Reboot
</a> </a></li><li class="active bd-sidenav-active">
</li><li class="active bd-sidenav-active">
<a href="/docs/4.0/content/typography/"> <a href="/docs/4.0/content/typography/">
Typography Typography
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/code/"> <a href="/docs/4.0/content/code/">
Code Code
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/images/"> <a href="/docs/4.0/content/images/">
Images Images
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/tables/"> <a href="/docs/4.0/content/tables/">
Tables Tables
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/content/figures/"> <a href="/docs/4.0/content/figures/">
Figures Figures
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/components/alerts/"> <a class="bd-toc-link" href="/docs/4.0/components/alerts/">
Components Components
@@ -295,130 +221,67 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/components/alerts/"> <a href="/docs/4.0/components/alerts/">
Alerts Alerts
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/badge/"> <a href="/docs/4.0/components/badge/">
Badge Badge
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/breadcrumb/"> <a href="/docs/4.0/components/breadcrumb/">
Breadcrumb Breadcrumb
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/buttons/"> <a href="/docs/4.0/components/buttons/">
Buttons Buttons
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/button-group/"> <a href="/docs/4.0/components/button-group/">
Button group Button group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/card/"> <a href="/docs/4.0/components/card/">
Card Card
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/carousel/"> <a href="/docs/4.0/components/carousel/">
Carousel Carousel
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/collapse/"> <a href="/docs/4.0/components/collapse/">
Collapse Collapse
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/dropdowns/"> <a href="/docs/4.0/components/dropdowns/">
Dropdowns Dropdowns
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/forms/"> <a href="/docs/4.0/components/forms/">
Forms Forms
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/input-group/"> <a href="/docs/4.0/components/input-group/">
Input group Input group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/jumbotron/"> <a href="/docs/4.0/components/jumbotron/">
Jumbotron Jumbotron
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/list-group/"> <a href="/docs/4.0/components/list-group/">
List group List group
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/modal/"> <a href="/docs/4.0/components/modal/">
Modal Modal
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navs/"> <a href="/docs/4.0/components/navs/">
Navs Navs
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/navbar/"> <a href="/docs/4.0/components/navbar/">
Navbar Navbar
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/pagination/"> <a href="/docs/4.0/components/pagination/">
Pagination Pagination
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/popovers/"> <a href="/docs/4.0/components/popovers/">
Popovers Popovers
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/progress/"> <a href="/docs/4.0/components/progress/">
Progress Progress
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/scrollspy/"> <a href="/docs/4.0/components/scrollspy/">
Scrollspy Scrollspy
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/components/tooltips/"> <a href="/docs/4.0/components/tooltips/">
Tooltips Tooltips
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/utilities/borders/"> <a class="bd-toc-link" href="/docs/4.0/utilities/borders/">
Utilities Utilities
@@ -427,100 +290,52 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/utilities/borders/"> <a href="/docs/4.0/utilities/borders/">
Borders Borders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/clearfix/"> <a href="/docs/4.0/utilities/clearfix/">
Clearfix Clearfix
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/close-icon/"> <a href="/docs/4.0/utilities/close-icon/">
Close icon Close icon
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/colors/"> <a href="/docs/4.0/utilities/colors/">
Colors Colors
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/display/"> <a href="/docs/4.0/utilities/display/">
Display Display
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/embed/"> <a href="/docs/4.0/utilities/embed/">
Embed Embed
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/flex/"> <a href="/docs/4.0/utilities/flex/">
Flex Flex
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/float/"> <a href="/docs/4.0/utilities/float/">
Float Float
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/image-replacement/"> <a href="/docs/4.0/utilities/image-replacement/">
Image replacement Image replacement
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/position/"> <a href="/docs/4.0/utilities/position/">
Position Position
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/screenreaders/"> <a href="/docs/4.0/utilities/screenreaders/">
Screenreaders Screenreaders
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/sizing/"> <a href="/docs/4.0/utilities/sizing/">
Sizing Sizing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/spacing/"> <a href="/docs/4.0/utilities/spacing/">
Spacing Spacing
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/text/"> <a href="/docs/4.0/utilities/text/">
Text Text
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/vertical-align/"> <a href="/docs/4.0/utilities/vertical-align/">
Vertical align Vertical align
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/utilities/visibility/"> <a href="/docs/4.0/utilities/visibility/">
Visibility Visibility
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/extend/icons/"> <a class="bd-toc-link" href="/docs/4.0/extend/icons/">
Extend Extend
@@ -529,10 +344,7 @@
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/extend/icons/"> <a href="/docs/4.0/extend/icons/">
Icons Icons
</a> </a></li></ul>
</li></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/migration/"> <a class="bd-toc-link" href="/docs/4.0/migration/">
Migration Migration
@@ -540,41 +352,23 @@
<ul class="nav bd-sidenav"></ul> <ul class="nav bd-sidenav"></ul>
</div><div class="bd-toc-item"> </div><div class="bd-toc-item">
<a class="bd-toc-link" href="/docs/4.0/about/history/"> <a class="bd-toc-link" href="/docs/4.0/about/overview/">
About About
</a> </a>
<ul class="nav bd-sidenav"><li> <ul class="nav bd-sidenav"><li>
<a href="/docs/4.0/about/history/"> <a href="/docs/4.0/about/overview/">
History Overview
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/team/">
Team
</a>
</li><li>
<a href="/docs/4.0/about/brand/"> <a href="/docs/4.0/about/brand/">
Brand Brand
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/license/"> <a href="/docs/4.0/about/license/">
License License
</a> </a></li><li>
</li><li>
<a href="/docs/4.0/about/translations/"> <a href="/docs/4.0/about/translations/">
Translations Translations
</a> </a></li></ul>
</li></ul>
</div></nav> </div></nav>
</div> </div>
@@ -797,7 +591,7 @@
<h2 id="text-utilities">Text utilities</h2> <h2 id="text-utilities">Text utilities</h2>
<p>Change text alignment, transform, style, weight, and color with our <a href="/docs/4.0/utilities/text/#text-alignment">text utilities</a>.</p> <p>Change text alignment, transform, style, weight, and color with our <a href="/docs/4.0/utilities/text/">text utilities</a> and <a href="/docs/4.0/utilities/colors/">color utilities</a>.</p>
<h2 id="abbreviations">Abbreviations</h2> <h2 id="abbreviations">Abbreviations</h2>
@@ -1017,20 +811,7 @@
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script> <script>
docsearch({ docsearch({
apiKey: '48cb48b22351bc71ea5f12f4d1ede198', apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
@@ -1050,10 +831,7 @@
}, },
debug: false // Set debug to true if you want to inspect the dropdown debug: false // Set debug to true if you want to inspect the dropdown
}); });
</script> </script><script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+1 -1
View File
@@ -123,7 +123,7 @@
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script> <script src="../../../../assets/js/vendor/holder.min.js"></script>
+1 -14
View File
@@ -1,7 +1,6 @@
/* /*
* Globals * Globals
*/ */
@media (min-width: 48em) { @media (min-width: 48em) {
html { html {
font-size: 18px; font-size: 18px;
@@ -30,24 +29,20 @@ h6,
color: #333; color: #333;
} }
/* /*
* Override Bootstrap's default container. * Override Bootstrap's default container.
*/ */
.container { .container {
max-width: 60rem; max-width: 60rem;
} }
/* /*
* Masthead for nav * Masthead for nav
*/ */
.blog-masthead { .blog-masthead {
margin-bottom: 3rem; margin-bottom: 3rem;
background-color: #428bca; background-color: #428bca;
box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1); box-shadow: inset 0 -.1rem .25rem rgba(0, 0, 0, .1);
} }
/* Nav links */ /* Nav links */
@@ -81,11 +76,9 @@ h6,
border-left: .3rem solid transparent; border-left: .3rem solid transparent;
} }
/* /*
* Blog name and description * Blog name and description
*/ */
.blog-header { .blog-header {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
margin-bottom: 2rem; margin-bottom: 2rem;
@@ -107,7 +100,6 @@ h6,
} }
} }
/* /*
* Main column and sidebar layout * Main column and sidebar layout
*/ */
@@ -127,7 +119,6 @@ h6,
margin-bottom: 0; margin-bottom: 0;
} }
/* Pagination */ /* Pagination */
.blog-pagination { .blog-pagination {
margin-bottom: 4rem; margin-bottom: 4rem;
@@ -136,11 +127,9 @@ h6,
border-radius: 2rem; border-radius: 2rem;
} }
/* /*
* Blog posts * Blog posts
*/ */
.blog-post { .blog-post {
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@@ -153,11 +142,9 @@ h6,
color: #999; color: #999;
} }
/* /*
* Footer * Footer
*/ */
.blog-footer { .blog-footer {
padding: 2.5rem 0; padding: 2.5rem 0;
color: #999; color: #999;
+1 -2
View File
@@ -154,12 +154,11 @@
</p> </p>
</footer> </footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -3
View File
@@ -173,15 +173,13 @@
<p class="float-right"><a href="#">Back to top</a></p> <p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p> <p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer> </footer>
</main> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! --> <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
+5 -10
View File
@@ -23,7 +23,6 @@ a:hover {
/* /*
* Base structure * Base structure
*/ */
html, html,
body { body {
height: 100%; height: 100%;
@@ -32,7 +31,7 @@ body {
body { body {
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 .05rem .1rem rgba(0,0,0,.5); text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
} }
/* Extra markup and styles for table-esque vertical and horizontal centering */ /* Extra markup and styles for table-esque vertical and horizontal centering */
@@ -41,7 +40,7 @@ body {
width: 100%; width: 100%;
height: 100%; /* For at least Firefox */ height: 100%; /* For at least Firefox */
min-height: 100%; min-height: 100%;
box-shadow: inset 0 0 5rem rgba(0,0,0,.5); box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
} }
.site-wrapper-inner { .site-wrapper-inner {
display: table-cell; display: table-cell;
@@ -61,7 +60,6 @@ body {
/* /*
* Header * Header
*/ */
.masthead { .masthead {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -73,14 +71,14 @@ body {
.nav-masthead .nav-link { .nav-masthead .nav-link {
padding: .25rem 0; padding: .25rem 0;
font-weight: 700; font-weight: 700;
color: rgba(255,255,255,.5); color: rgba(255, 255, 255, .5);
background-color: transparent; background-color: transparent;
border-bottom: .25rem solid transparent; border-bottom: .25rem solid transparent;
} }
.nav-masthead .nav-link:hover, .nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus { .nav-masthead .nav-link:focus {
border-bottom-color: rgba(255,255,255,.25); border-bottom-color: rgba(255, 255, 255, .25);
} }
.nav-masthead .nav-link + .nav-link { .nav-masthead .nav-link + .nav-link {
@@ -105,7 +103,6 @@ body {
/* /*
* Cover * Cover
*/ */
.cover { .cover {
padding: 0 1.5rem; padding: 0 1.5rem;
} }
@@ -118,16 +115,14 @@ body {
/* /*
* Footer * Footer
*/ */
.mastfoot { .mastfoot {
color: rgba(255,255,255,.5); color: rgba(255, 255, 255, .5);
} }
/* /*
* Affix and center * Affix and center
*/ */
@media (min-width: 40em) { @media (min-width: 40em) {
/* Pull out the header and footer */ /* Pull out the header and footer */
.masthead { .masthead {
+1 -1
View File
@@ -59,7 +59,7 @@
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -1
View File
@@ -255,7 +255,7 @@
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+2 -2
View File
@@ -17,8 +17,8 @@ h3 {
[class*="col-"] { [class*="col-"] {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
background-color: rgba(86,61,124,.15); background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86,61,124,.2); border: 1px solid rgba(86, 61, 124, .2);
} }
hr { hr {
+45 -74
View File
@@ -3,13 +3,15 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0"> <meta name="description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.6.2">
<title>Examples &middot; Bootstrap</title> <title>Examples · Bootstrap</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras --> <!-- Documentation extras -->
@@ -27,28 +29,19 @@
<meta name="theme-color" content="#563d7c"> <meta name="theme-color" content="#563d7c">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<!-- Twitter --> <!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@getbootstrap"> <meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap"> <meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:title" content="Examples">
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta name="twitter:card" content="summary"> <meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<meta name="twitter:title" content="Examples">
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
<!-- Facebook --> <!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/examples/">
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/examples/"> <meta property="og:title" content="Examples">
<meta property="og:title" content="Examples"> <meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts."> <meta property="og:type" content="website">
<meta property="og:type" content="website">
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png"> <meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png"> <meta property="og:image:type" content="image/png">
@@ -74,10 +67,8 @@
</a> </a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg> </a>
</a>
<div class="navbar-nav-scroll"> <div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row"> <ul class="navbar-nav bd-navbar-nav flex-row">
@@ -119,37 +110,31 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"> <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"> <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg> </a>
</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"> <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg> </a>
</a>
</li> </li>
</ul> </ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download</a> <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
</header> </header>
<div class="container my-5"> <div class="container my-5">
<main class="bd-content" role="main"> <main class="bd-content" role="main">
<h1 class="bd-title" id="content">Examples</h1> <h1 class="bd-title" id="content">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p> <p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script> <script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.2.zip">Download the Bootstrap source code</a> to snag these examples.</p> <p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download the Bootstrap source code</a> to snag these examples.</p>
<h2 id="framework">Framework</h2> <h2 id="framework">Framework</h2>
@@ -158,14 +143,14 @@
<div class="row bd-examples"> <div class="row bd-examples">
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/starter-template/"> <a href="/docs/4.0/examples/starter-template/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/starter-template.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/starter-template.png" alt="" width="800" height="600" />
<h4>Starter template</h4> <h4>Starter template</h4>
</a> </a>
<p>Nothing but the basics: compiled CSS and JavaScript.</p> <p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/grid/"> <a href="/docs/4.0/examples/grid/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/grid.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/grid.png" alt="" width="800" height="600" />
<h4>Grids</h4> <h4>Grids</h4>
</a> </a>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p> <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
@@ -174,14 +159,14 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/jumbotron/"> <a href="/docs/4.0/examples/jumbotron/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="" width="800" height="600" />
<h4>Jumbotron</h4> <h4>Jumbotron</h4>
</a> </a>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p> <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/narrow-jumbotron/"> <a href="/docs/4.0/examples/narrow-jumbotron/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron-narrow.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron-narrow.png" alt="" width="800" height="600" />
<h4>Narrow jumbotron</h4> <h4>Narrow jumbotron</h4>
</a> </a>
<p>Build a more custom page by narrowing the default container and jumbotron.</p> <p>Build a more custom page by narrowing the default container and jumbotron.</p>
@@ -195,14 +180,14 @@
<div class="row bd-examples"> <div class="row bd-examples">
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbars/"> <a href="/docs/4.0/examples/navbars/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar.png" alt="" width="800" height="600" />
<h4>Navbar</h4> <h4>Navbar</h4>
</a> </a>
<p>Super basic template that includes the navbar along with some additional content.</p> <p>Super basic template that includes the navbar along with some additional content.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-top/"> <a href="/docs/4.0/examples/navbar-top/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-static.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="" width="800" height="600" />
<h4>Static top navbar</h4> <h4>Static top navbar</h4>
</a> </a>
<p>Super basic template with a static top navbar along with some additional content.</p> <p>Super basic template with a static top navbar along with some additional content.</p>
@@ -211,14 +196,14 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-top-fixed/"> <a href="/docs/4.0/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-fixed.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="" width="800" height="600" />
<h4>Fixed navbar</h4> <h4>Fixed navbar</h4>
</a> </a>
<p>Super basic template with a fixed top navbar along with some additional content.</p> <p>Super basic template with a fixed top navbar along with some additional content.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/navbar-bottom/"> <a href="/docs/4.0/examples/navbar-bottom/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-bottom.jpg" alt="" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="" />
<h4>Bottom navbar</h4> <h4>Bottom navbar</h4>
</a> </a>
<p>Super basic template with a bottom navbar along with some additional content.</p> <p>Super basic template with a bottom navbar along with some additional content.</p>
@@ -232,14 +217,14 @@
<div class="row bd-examples"> <div class="row bd-examples">
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/album/"> <a href="/docs/4.0/examples/album/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/album.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/album.png" alt="" width="800" height="600" />
<h4>Album</h4> <h4>Album</h4>
</a> </a>
<p>Simple one-page template for photo galleries, portfolios, and more.</p> <p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/cover/"> <a href="/docs/4.0/examples/cover/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/cover.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/cover.png" alt="" width="800" height="600" />
<h4>Cover</h4> <h4>Cover</h4>
</a> </a>
<p>A one-page template for building simple and beautiful home pages.</p> <p>A one-page template for building simple and beautiful home pages.</p>
@@ -248,14 +233,14 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/carousel/"> <a href="/docs/4.0/examples/carousel/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/carousel.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/carousel.png" alt="" width="800" height="600" />
<h4>Carousel</h4> <h4>Carousel</h4>
</a> </a>
<p>Customize the navbar and carousel, then add some new components.</p> <p>Customize the navbar and carousel, then add some new components.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/blog/"> <a href="/docs/4.0/examples/blog/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/blog.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/blog.png" alt="" width="800" height="600" />
<h4>Blog</h4> <h4>Blog</h4>
</a> </a>
<p>Simple two-column blog layout with custom navigation, header, and type.</p> <p>Simple two-column blog layout with custom navigation, header, and type.</p>
@@ -264,14 +249,14 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/dashboard/"> <a href="/docs/4.0/examples/dashboard/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/dashboard.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/dashboard.png" alt="" width="800" height="600" />
<h4>Dashboard</h4> <h4>Dashboard</h4>
</a> </a>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p> <p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/signin/"> <a href="/docs/4.0/examples/signin/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sign-in.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sign-in.png" alt="" width="800" height="600" />
<h4>Sign-in page</h4> <h4>Sign-in page</h4>
</a> </a>
<p>Custom form layout and design for a simple sign in form.</p> <p>Custom form layout and design for a simple sign in form.</p>
@@ -280,14 +265,14 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/justified-nav/"> <a href="/docs/4.0/examples/justified-nav/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/justified-nav.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/justified-nav.png" alt="" width="800" height="600" />
<h4>Justified nav</h4> <h4>Justified nav</h4>
</a> </a>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p> <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div> </div>
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/sticky-footer/"> <a href="/docs/4.0/examples/sticky-footer/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="" width="800" height="600" />
<h4>Sticky footer</h4> <h4>Sticky footer</h4>
</a> </a>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p> <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
@@ -296,7 +281,7 @@
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/sticky-footer-navbar/"> <a href="/docs/4.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="" width="800" height="600" />
<h4>Sticky footer w/ navbar</h4> <h4>Sticky footer w/ navbar</h4>
</a> </a>
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p> <p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
@@ -310,7 +295,7 @@
<div class="row bd-examples"> <div class="row bd-examples">
<div class="col-6 col-md-4"> <div class="col-6 col-md-4">
<a href="/docs/4.0/examples/offcanvas/"> <a href="/docs/4.0/examples/offcanvas/">
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/offcanvas.jpg" alt="" width="800" height="600" /> <img class="img-thumbnail" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="" width="800" height="600" />
<h4>Offcanvas</h4> <h4>Offcanvas</h4>
</a> </a>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p> <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
@@ -328,31 +313,17 @@
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li> <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
<li><a href="/docs/4.0/examples/">Examples</a></li> <li><a href="/docs/4.0/examples/">Examples</a></li>
<li><a href="/docs/4.0/about/history/">About</a></li> <li><a href="/docs/4.0/about/overview/">About</a></li>
</ul> </ul>
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Currently v4.0.0-beta.2. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p> <p>Currently v4.0.0-beta.3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
</div> </div>
</footer> </footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/assets/js/vendor/popper.min.js"></script> <script src="/assets/js/vendor/popper.min.js"></script><script src="/dist/js/bootstrap.min.js"></script><script src="/assets/js/docs.min.js"></script><script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/docs.min.js"></script>
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
<script>
Holder.addTheme('gray', { Holder.addTheme('gray', {
bg: '#777', bg: '#777',
fg: 'rgba(255,255,255,.75)', fg: 'rgba(255,255,255,.75)',
+1 -1
View File
@@ -96,7 +96,7 @@
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -2
View File
@@ -94,12 +94,11 @@
</div> <!-- /container --> </div> <!-- /container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
@@ -20,18 +20,20 @@ body {
} }
.navbar { .navbar {
background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%); background-image: linear-gradient(to bottom, #f7f7f7 0%, #eee 100%);
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-nav { .navbar-nav {
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-box;
display: flex; display: flex;
} }
.navbar-nav .nav-item { .navbar-nav .nav-item {
-ms-flex: 1 0 auto; -ms-flex: 1 0 auto;
-webkit-box-flex: 1;
flex: 1 0 auto; flex: 1 0 auto;
} }
} }
+2 -2
View File
@@ -21,7 +21,7 @@
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </div>
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark"> <nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bottom navbar</a> <a class="navbar-brand" href="#">Bottom navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@@ -53,7 +53,7 @@
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
@@ -50,12 +50,11 @@
</div> </div>
</main> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -2
View File
@@ -50,12 +50,11 @@
</div> </div>
</main> </main>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -2
View File
@@ -336,12 +336,11 @@
</main> </main>
</div> </div>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>
+1 -2
View File
@@ -121,12 +121,11 @@
<p>&copy; Company 2017</p> <p>&copy; Company 2017</p>
</footer> </footer>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="offcanvas.js"></script> <script src="offcanvas.js"></script>
+1 -1
View File
@@ -17,7 +17,7 @@ footer {
* Off Canvas * Off Canvas
* -------------------------------------------------- * --------------------------------------------------
*/ */
@media screen and (max-width: 767px) { @media screen and (max-width: 767.99px) {
.row-offcanvas { .row-offcanvas {
position: relative; position: relative;
transition: all .25s ease-out; transition: all .25s ease-out;
Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

@@ -60,12 +60,11 @@
</main><!-- /.container --> </main><!-- /.container -->
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript
================================================== --> ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script> <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script> <script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script> <script src="../../../../dist/js/bootstrap.min.js"></script>
</body> </body>

Some files were not shown because too many files have changed in this diff Show More