From fc87624a5002177eb590101a087e0c03a68f73c0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 20 Apr 2022 22:27:28 -0700 Subject: [PATCH] Rewrite Getting Started > Introduction page to be more guide-like (#36204) * Rewrite Getting Started > Introduction page to be more guide-like * Add tabs, mention offcanvas for navbar --- .../docs/5.1/getting-started/introduction.md | 130 +++++++++--------- .../partials/home/masthead-followup.html | 2 +- 2 files changed, 66 insertions(+), 66 deletions(-) diff --git a/site/content/docs/5.1/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md index e12ea9687e..70bfdc7046 100644 --- a/site/content/docs/5.1/getting-started/introduction.md +++ b/site/content/docs/5.1/getting-started/introduction.md @@ -1,7 +1,7 @@ --- layout: docs -title: Introduction -description: Get started with Bootstrap via CDN and a template starter page. +title: Get started with Bootstrap +description: Bootstrap is a powerful, feature-packed frontend toolkit. Build anythingâfrom prototype to productionâin minutes. group: getting-started aliases: - "/docs/5.1/getting-started/" @@ -12,42 +12,77 @@ toc: true ## Quick start -Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? [Head to the downloads page]({{< docsref "/getting-started/download" >}}). +Get started by including Bootstrap's production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this [Bootstrap CodePen demo](https://codepen.io/team/bootstrap/pen/qBamdLj). -### CSS +
-Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS. +1. **Create a new `index.html` file in your project root.** Include the `}}" rel="stylesheet" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous"> -``` + ```html + + + + + + Bootstrap demo + + +

Hello, world!

+ + + ``` -### JS +2. **Include Bootstrap's CSS and JS.** Place the `` tag in the `` for our CSS, and the ` + + + ``` -#### Bundle + You can also include [Popper](https://popper.js.org/) and our JS separately. If you don't plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including Popper. -Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section. + ```html + + + ``` -```html - -``` +3. **Hello, world!** Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own [layout]({{< docsref "/layout/grid" >}}), adding dozens of [components]({{< docsref "/components/buttons" >}}), and utilizing [our official examples]({{< docsref "/examples" >}}). -#### Separate +## CDN links -If you decide to go with the separate scripts solution, Popper must come first (if you're using tooltips or popovers), and then our JavaScript plugins. +As reference, here are our primary CDN links. -```html - - -``` +{{< bs-table >}} +| Description | URL | +| --- | --- | +| CSS | `{{< param "cdn.css" >}}` | +| JS | `{{< param "cdn.js_bundle" >}}` | +{{< /bs-table >}} + +You can also use the CDN to fetch any of our [additional builds listed in the Contents page]({{< docsref "/getting-started/contents" >}}). + +## Next steps + +- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes. + +- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) and the list of [components that require JavaScript](#js-components) below. -#### Modules +- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}). -If you use ` - - - - - -``` - -For next steps, visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components. - ## Important globals -Bootstrap employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in. +Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in. ### HTML5 doctype -Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups. +Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky and incomplete styling. ```html @@ -121,13 +121,13 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun ### Responsive meta tag -Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your ``. +Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your ``. ```html ``` -You can see an example of this in action in the [starter template](#starter-template). +You can see an example of this in action in the [quick start](#quick-start). ### Box-sizing diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 95f394f5ad..26c8a04a9b 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -32,7 +32,7 @@

Include via CDN

- When you only need to include Bootstrapâs compiled CSS or JS, you can use jsDelivr. See it in action with our simple starter template, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately. + When you only need to include Bootstrapâs compiled CSS or JS, you can use jsDelivr. See it in action with our simple quick start, or browse the examples to jumpstart your next project. You can also choose to include Popper and our JS separately.

{{ highlight (printf (` -- 2.47.2