mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
beta docs
This commit is contained in:
407
index.html
407
index.html
@@ -1,161 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<head>
|
||||
<meta charset=utf-8>
|
||||
<meta content="IE=edge" http-equiv=X-UA-Compatible>
|
||||
<meta content="width=device-width,initial-scale=1" name=viewport>
|
||||
<meta content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development." name=description>
|
||||
<meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name=author>
|
||||
<title> Bootstrap · The world's most popular mobile-first and responsive front-end framework. </title>
|
||||
<link href=../dist/css/bootstrap.min.css rel=stylesheet>
|
||||
<link href=../assets/css/docs.min.css rel=stylesheet>
|
||||
<!--[if lt IE 9]><script src=../assets/js/ie8-responsive-file-warning.js></script><![endif]-->
|
||||
<script src=../assets/js/ie-emulation-modes-warning.js></script>
|
||||
<!--[if lt IE 9]> <script src=https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js></script> <script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script> <![endif]-->
|
||||
<link href=/apple-touch-icon.png rel=apple-touch-icon>
|
||||
<link href=/favicon.ico rel=icon>
|
||||
<script>
|
||||
! function(e, t, a, n, c, o, s) {
|
||||
e.GoogleAnalyticsObject = c, e[c] = e[c] || function() {
|
||||
(e[c].q = e[c].q || []).push(arguments)
|
||||
}, e[c].l = 1 * new Date, o = t.createElement(a), s = t.getElementsByTagName(a)[0], o.async = 1, o.src = n, s.parentNode.insertBefore(o, s)
|
||||
}(window, document, "script", "//www.google-analytics.com/analytics.js", "ga"), ga("create", "UA-146052-10", "getbootstrap.com"), ga("send", "pageview")
|
||||
</script>
|
||||
</head>
|
||||
<title>
|
||||
|
||||
<body class=bs-docs-home>
|
||||
<a href=#content class="sr-only sr-only-focusable" id=skippy>
|
||||
<div class=container><span class=skiplink-text>Skip to main content</span></div>
|
||||
</a> <a href=https://v4-alpha.getbootstrap.com/ class=v4-tease>Aww yeah, Bootstrap 4 is coming!</a>
|
||||
<header class="bs-docs-nav navbar navbar-static-top" id=top>
|
||||
<div class=container>
|
||||
<div class=navbar-header>
|
||||
<button aria-controls=bs-navbar aria-expanded=false class="collapsed navbar-toggle" data-target=#bs-navbar data-toggle=collapse type=button> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div>
|
||||
<nav class="collapse navbar-collapse" id=bs-navbar>
|
||||
<ul class="nav navbar-nav">
|
||||
<li> <a href=../getting-started/>Getting started</a>
|
||||
</li>
|
||||
<li> <a href=../css/>CSS</a>
|
||||
</li>
|
||||
<li> <a href=../components/>Components</a>
|
||||
</li>
|
||||
<li> <a href=../javascript/>JavaScript</a>
|
||||
</li>
|
||||
<li> <a href=../customize/>Customize</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href=http://themes.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Themes")'>Themes</a></li>
|
||||
<li><a href=https://jobs.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Jobs")'>Jobs</a></li>
|
||||
<li><a href=http://expo.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Expo")'>Expo</a></li>
|
||||
<li><a href=http://blog.getbootstrap.com onclick='ga("send","event","Navbar","Community links","Blog")'>Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class=bs-docs-masthead id=content tabindex=-1>
|
||||
<div class=container> <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
|
||||
<p class=lead>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
|
||||
<p class=lead> <a href=getting-started#download class="btn btn-outline-inverse btn-lg" onclick='ga("send","event","Jumbotron actions","Download","Download 3.3.7")'>Download Bootstrap</a> </p>
|
||||
<p class=version>Currently v3.3.7</p>
|
||||
<div id=carbonads-container>
|
||||
<div class=carbonad>
|
||||
<div id=azcarbon></div>
|
||||
<script>
|
||||
var z = document.createElement("script");
|
||||
z.async = !0, z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(z, s)
|
||||
</script>
|
||||
Bootstrap · The most popular HTML, CSS, and JS library in the world.
|
||||
|
||||
</title>
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Bootstrap">
|
||||
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="twitter:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
|
||||
|
||||
<!-- Facebook -->
|
||||
|
||||
<meta property="og:url" content="http://getbootstrap.com">
|
||||
<meta property="og:title" content="Bootstrap">
|
||||
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
|
||||
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="http://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">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
|
||||
<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 class="bd-home">
|
||||
<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 active" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.0/" 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/3.3.7/">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-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.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="bd-masthead" id="content" role="main">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6 mx-auto col-md-6 order-md-2">
|
||||
<img src="/assets/img/bootstrap-stack.png" alt="" class="img-fluid mb-3 mb-md-0">
|
||||
</div>
|
||||
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
|
||||
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
|
||||
<p class="lead">
|
||||
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
|
||||
</p>
|
||||
<p class="lead mb-4">
|
||||
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-md-row lead mb-3">
|
||||
<a href="/docs/4.0/getting-started/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
|
||||
<a href="/docs/4.0/getting-started/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 4.0.0-beta');">Download</a>
|
||||
</div>
|
||||
<p class="text-muted mb-0">
|
||||
Currently v4.0.0-beta
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class=bs-docs-featurette>
|
||||
<div class=container>
|
||||
<h2 class=bs-docs-featurette-title>Designed for everyone, everywhere</h2>
|
||||
<p class=lead>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
||||
<hr class=half-rule>
|
||||
<div class=row>
|
||||
<div class=col-sm-4> <img alt="Sass and Less support" src=assets/img/sass-less.png class=img-responsive>
|
||||
<h3>Preprocessors</h3>
|
||||
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href=../css/#less>Less</a> and <a href=../css/#sass>Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
|
||||
</div>
|
||||
<div class=col-sm-4> <img alt="Responsive across devices" src=assets/img/devices.png class=img-responsive>
|
||||
<h3>One framework, every device.</h3>
|
||||
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
||||
</div>
|
||||
<div class=col-sm-4> <img alt=Components src=assets/img/components.png class=img-responsive>
|
||||
<h3>Full of features</h3>
|
||||
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class=half-rule>
|
||||
<p class=lead>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a href=https://github.com/twbs/bootstrap class="btn btn-outline btn-lg">View the GitHub project</a> </div>
|
||||
</div>
|
||||
<div class="bs-docs-featurette">
|
||||
<div class="container">
|
||||
<h2 class="bs-docs-featurette-title">Official Bootstrap Themes</h2>
|
||||
<p class="lead">
|
||||
Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
|
||||
</p>
|
||||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p class="lead">
|
||||
<a href="https://themes.getbootstrap.com" class="btn btn-outline btn-lg">Browse themes</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<img class="img-responsive" src="/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388" style="margin-left: auto; margin-right: auto;">
|
||||
</div>
|
||||
<div class="masthead-followup row m-0 border border-white">
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
|
||||
</svg>
|
||||
<h3>Installation</h3>
|
||||
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install bootstrap@4.0.0-beta</code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install bootstrap -v 4.0.0.alpha6</code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">bower install bootstrap#v4.0.0-beta</code></pre></figure>
|
||||
<hr class="half-rule">
|
||||
<a class="btn btn-outline-primary" href="/docs/4.0/getting-started/download">Read installation docs</a>
|
||||
</div>
|
||||
<div class=bs-docs-featurette>
|
||||
<div class=container>
|
||||
<h2 class=bs-docs-featurette-title>Built with Bootstrap</h2>
|
||||
<p class=lead>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href=../getting-started/#examples>collection of examples</a> or by exploring some of our favorites.</p>
|
||||
<hr class=half-rule>
|
||||
<div class="row bs-docs-featured-sites">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<a href=http://expo.getbootstrap.com/2014/10/29/lyft/ target=_blank title=Lyft> <img alt=Lyft src=/assets/img/expo-lyft.jpg class=img-responsive> </a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<a href=http://expo.getbootstrap.com/2014/09/30/vogue/ target=_blank title=Vogue> <img alt=Vogue src=/assets/img/expo-vogue.jpg class=img-responsive> </a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<a href=http://expo.getbootstrap.com/2014/03/13/riot-design/ target=_blank title="Riot Design"> <img alt="Riot Design" src=/assets/img/expo-riot.jpg class=img-responsive> </a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<a href=http://expo.getbootstrap.com/2014/02/12/newsweek/ target=_blank title=Newsweek> <img alt=Newsweek src=/assets/img/expo-newsweek.jpg class=img-responsive> </a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class=half-rule>
|
||||
<p class=lead>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p> <a href=http://expo.getbootstrap.com class="btn btn-outline btn-lg">Explore the Expo</a> </div>
|
||||
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
|
||||
</svg>
|
||||
<h3>Bootstrap CDN</h3>
|
||||
<p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>
|
||||
|
||||
<h5>CSS only</h5>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h5>JS, Popper, and jQuery</h5>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<hr class="half-rule">
|
||||
<a class="btn btn-outline-primary" href="/docs/4.0/layout/overview/">Explore the docs</a>
|
||||
</div>
|
||||
<footer class=bs-docs-footer>
|
||||
<div class=container>
|
||||
<ul class=bs-docs-footer-links>
|
||||
<li><a href=https://github.com/twbs/bootstrap>GitHub</a></li>
|
||||
<li><a href=https://twitter.com/getbootstrap>Twitter</a></li>
|
||||
<li><a href=../getting-started/#examples>Examples</a></li>
|
||||
<li><a href=../about/>About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@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>Code licensed <a href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank rel=license>MIT</a>, docs <a href=https://creativecommons.org/licenses/by/3.0/ target=_blank rel=license>CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
|
||||
<script>
|
||||
window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>')
|
||||
</script>
|
||||
<script src=../dist/js/bootstrap.min.js></script>
|
||||
<script src=../assets/js/docs.min.js></script>
|
||||
<script src=../assets/js/ie10-viewport-bug-workaround.js></script>
|
||||
<script>
|
||||
var _gauges = _gauges || [];
|
||||
! function() {
|
||||
var e = document.createElement("script");
|
||||
e.async = !0, e.id = "gauges-tracker", e.setAttribute("data-site-id", "4f0dc9fef5a1f55508000013"), e.src = "//secure.gaug.es/track.js";
|
||||
var t = document.getElementsByTagName("script")[0];
|
||||
t.parentNode.insertBefore(e, t)
|
||||
}()
|
||||
</script>
|
||||
|
||||
<div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
|
||||
<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
|
||||
<svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
|
||||
</svg>
|
||||
<h3>Official Themes</h3>
|
||||
<p>
|
||||
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
|
||||
</p>
|
||||
<img class="img-fluid mt-3 mx-auto" src="/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
|
||||
<hr class="half-rule">
|
||||
<a href="https://themes.getbootstrap.com" class="btn btn-outline-primary">Browse themes</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<footer class="bd-footer text-muted">
|
||||
<div class="container-fluid p-3 p-md-5">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li><a href="/examples/">Examples</a></li>
|
||||
<li><a href="/about/history/">About</a></li>
|
||||
</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>Currently v4.0.0-beta. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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.js"></script>
|
||||
|
||||
|
||||
|
||||
<script src="/assets/js/vendor/anchor.min.js"></script>
|
||||
<script src="/assets/js/vendor/clipboard.min.js"></script>
|
||||
<script src="/assets/js/vendor/holder.min.js"></script>
|
||||
<script src="/assets/js/src/application.js"></script>
|
||||
|
||||
|
||||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||||
<script src="/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||||
<script src="/assets/js/ie-emulation-modes-warning.js"></script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user