diff options
| author | mdo <mdo@users.noreply.github.com> | 2022-11-11 20:33:33 +0300 |
|---|---|---|
| committer | mdo <mdo@users.noreply.github.com> | 2022-11-11 20:33:33 +0300 |
| commit | 3e277e7d6f0eb4c7becc03114cc95d446aae93c9 (patch) | |
| tree | d56e1a1a763cb83386e32d7799a02ab72d7317a6 | |
| parent | c37c8d9511318566d3b9e1d1ca76525f2a6f8009 (diff) | |
deploy: b2f73803e27b1d0784852f06e448782a3abcd86egh-pages
| -rw-r--r-- | 2022/11/11/bootstrap-icons-1-10-0/index.html | 378 | ||||
| -rw-r--r-- | archive/index.html | 3 | ||||
| -rw-r--r-- | assets/img/2022/11/bootstrap-icons-v1100.png | bin | 0 -> 37461 bytes | |||
| -rw-r--r-- | feed.xml | 65 | ||||
| -rw-r--r-- | index.html | 117 | ||||
| -rw-r--r-- | page/10/index.html | 119 | ||||
| -rw-r--r-- | page/11/index.html | 122 | ||||
| -rw-r--r-- | page/12/index.html | 115 | ||||
| -rw-r--r-- | page/13/index.html | 114 | ||||
| -rw-r--r-- | page/14/index.html | 133 | ||||
| -rw-r--r-- | page/15/index.html | 115 | ||||
| -rw-r--r-- | page/16/index.html | 77 | ||||
| -rw-r--r-- | page/17/index.html | 158 | ||||
| -rw-r--r-- | page/18/index.html | 163 | ||||
| -rw-r--r-- | page/19/index.html | 129 | ||||
| -rw-r--r-- | page/2/index.html | 103 | ||||
| -rw-r--r-- | page/20/index.html | 116 | ||||
| -rw-r--r-- | page/21/index.html | 87 | ||||
| -rw-r--r-- | page/22/index.html | 94 | ||||
| -rw-r--r-- | page/23/index.html | 73 | ||||
| -rw-r--r-- | page/24/index.html | 35 | ||||
| -rw-r--r-- | page/3/index.html | 121 | ||||
| -rw-r--r-- | page/4/index.html | 376 | ||||
| -rw-r--r-- | page/5/index.html | 463 | ||||
| -rw-r--r-- | page/6/index.html | 312 | ||||
| -rw-r--r-- | page/7/index.html | 201 | ||||
| -rw-r--r-- | page/8/index.html | 91 | ||||
| -rw-r--r-- | page/9/index.html | 95 | ||||
| -rw-r--r-- | sitemap.xml | 12 |
29 files changed, 2224 insertions, 1763 deletions
diff --git a/2022/11/11/bootstrap-icons-1-10-0/index.html b/2022/11/11/bootstrap-icons-1-10-0/index.html new file mode 100644 index 00000000..cfa91758 --- /dev/null +++ b/2022/11/11/bootstrap-icons-1-10-0/index.html @@ -0,0 +1,378 @@ +<!doctype html> +<html lang="en" class="no-js"> + <head> + <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link href="https://gmpg.org/xfn/11" rel="profile"> +<link rel="canonical" href="https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/"> + +<meta name="description" content="Bootstrap Icons v1.10.0 is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at over 1,900 icons! +150 new icons Here’s a quick look at all the new icons in v1.10.0: +Some highlights for the new icons include: +22 new person icons 26 new house icons 24 new building icons, including a renamed building to buildings 22 new database icons 24 new street sign icons New globe icons New EV, taxi, bus, and scooter transportation icons New rockets and more!"> +<meta name="generator" content="Hugo 0.105.0"> + + + +<title>Bootstrap Icons v1.10.0 | Bootstrap Blog</title> + + + +<link href="/assets/css/style.css" rel="stylesheet"> + + +<link rel="alternate" type="application/rss+xml" href="https://blog.getbootstrap.com/feed.xml" title="Bootstrap Blog"> + +<!-- 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="#712cf9"> +<link rel="icon" href="/assets/img/favicons/favicon.ico"> +<meta name="theme-color" content="#712cf9"> + +<meta name="author" content="Mark Otto"> + +<!-- Twitter --> +<meta name="twitter:card" content="summary_large_image"/> +<meta name="twitter:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"/> + +<meta name="twitter:title" content="Bootstrap Icons v1.10.0"/> +<meta name="twitter:description" content="Bootstrap Icons v1.10.0 is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at over 1,900 icons! +150 new icons Here’s a quick look at all the new icons in v1.10.0: +Some highlights for the new icons include: +22 new person icons 26 new house icons 24 new building icons, including a renamed building to buildings 22 new database icons 24 new street sign icons New globe icons New EV, taxi, bus, and scooter transportation icons New rockets and more!"/> +<meta name="twitter:creator" content="@mdo"> + +<!-- Facebook --> +<meta property="og:title" content="Bootstrap Icons v1.10.0" /> +<meta property="og:description" content="Bootstrap Icons v1.10.0 is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at over 1,900 icons! +150 new icons Here’s a quick look at all the new icons in v1.10.0: +Some highlights for the new icons include: +22 new person icons 26 new house icons 24 new building icons, including a renamed building to buildings 22 new database icons 24 new street sign icons New globe icons New EV, taxi, bus, and scooter transportation icons New rockets and more!" /> +<meta property="og:type" content="article" /> +<meta property="og:url" content="https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/" /><meta property="og:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"/><meta property="article:section" content="posts" /> +<meta property="article:published_time" content="2022-11-11T00:01:00+00:00" /> +<meta property="article:modified_time" content="2022-11-11T00:01:00+00:00" /> + +<meta property="og:image:width" content="2000"> +<meta property="og:image:height" content="1000"> + +<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script> +<script> + window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; + ga('create', 'UA-146052-12', 'getbootstrap.com'); + ga('set', 'anonymizeIp', true); + ga('send', 'pageview'); +</script> +<script async src="https://www.google-analytics.com/analytics.js"></script> + +<script> + (function(html) { + html.className = html.className.replace(/\bno-js\b/, ''); + })(document.documentElement); +</script> + + + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="archive" viewBox="0 0 16 16"> + <path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/> + </symbol> + <symbol id="file-earmark-richtext" viewBox="0 0 16 16"> + <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/> + <path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/> + </symbol> + <symbol id="film" viewBox="0 0 16 16"> + <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> + </symbol> + <symbol id="rss" viewBox="0 0 16 16"> + <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/> + <path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z"/> + </symbol> + <symbol id="three-dots" viewBox="0 0 16 16"> + <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/> + </symbol> +</svg> + + <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top"> + <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> + <div class="d-lg-none" style="width: 2.25rem;"></div> + + <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> + </a> + + <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation"> + <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg> + </button> + + <div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel"> + <div class="offcanvas-header px-4 pb-0"> + <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button> + </div> + + <div class="offcanvas-body p-4 pt-0 p-lg-0"> + <hr class="d-lg-none text-white-50"> + <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2 active" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" rel="noopener">Blog</a> + </li> + </ul> + + <hr class="d-lg-none text-white-50"> + + <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><path fill="currentColor" fill-rule="evenodd" 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"/></svg> + + <small class="d-lg-none ms-2">GitHub</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><path fill="currentColor" 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"/></svg> + + <small class="d-lg-none ms-2">Twitter</small> + </a> + </li> + <li class="nav-item col-6 col-lg-auto"> + <a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener"> + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg> + + <small class="d-lg-none ms-2">Open Collective</small> + </a> + </li> + </ul> + </div> + </div> + </nav> +</header> + + + <div class="container-xxl px-4 px-xxl-2"> + <div class="d-lg-grid" id="content"> + <div class="sidebar"> + <div class="masthead py-5"> + <div class="mb-4 text-center text-lg-start"> + <a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> + <img src="/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="bd-booticon d-block mx-auto mb-3 mx-lg-0"> + </a> + <div class="ms-3 ms-lg-0"> + <h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1> + <p class="col-sm-8 col-lg-12 mx-auto mb-0 mb-lg-4"> + News and announcements for all things <a href="https://getbootstrap.com/" title="Visit the Bootstrap docs">Bootstrap</a>, + including new releases, <a href="https://themes.getbootstrap.com/" title="Browse the official Bootstrap themes">Bootstrap Themes</a>, + and <a href="https://icons.getbootstrap.com/" title="Official open source Bootstrap Icons">Bootstrap Icons</a>. + </p> + </div> + </div> + + <nav class="nav nav-pills justify-content-center flex-lg-column justify-content-lg-start gap-1 sidebar-nav"> + <a class="nav-link d-flex align-items-center text-dark" href="/"> + <svg class="bi me-2 f5 bd-text-purple"><use xlink:href="#file-earmark-richtext"></use></svg> + All posts + </a> + <a class="nav-link d-flex align-items-center text-dark" href="/archive/"> + <svg class="bi me-2 f5 text-primary"><use xlink:href="#archive"></use></svg> + Archive + </a> + <a class="nav-link d-flex align-items-center text-dark" href="/videos/"> + <svg class="bi me-2 f5 text-info"><use xlink:href="#film"></use></svg> + Videos + </a> + <a class="nav-link d-flex align-items-center text-dark" href="https://blog.getbootstrap.com/feed.xml"> + <svg class="bi me-2 f5 text-warning"><use xlink:href="#rss"></use></svg> + Subscribe + </a> + </nav> + + <script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJJ&placement=bloggetbootstrapcom" id="_carbonads_js"></script> + +</div> + + </div> + <div class="main"> + +<div class="posts-container mx-auto my-5"> + <div class="post"> + <h1 class="post-title fw-600">Bootstrap Icons v1.10.0</h1> + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="11 Nov 22 00:01 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + November 11, 2022 + </span> +</div> +<p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.10.0</a> is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at <strong>over 1,900 icons</strong>!</p> +<h2 id="150-new-icons">150 new icons</h2> +<p>Here’s a quick look at all the new icons in v1.10.0:</p> +<p><img src="/assets/img/2022/11/bootstrap-icons-v1100.png" class="d-block img-fluid mb-2 rounded border" alt="New love icons in v1.10.0" loading="lazy" width="1520" height="1664"> +</p> +<p>Some highlights for the new icons include:</p> +<ul> +<li>22 new person icons</li> +<li>26 new house icons</li> +<li>24 new building icons, including a renamed <code>building</code> to <code>buildings</code></li> +<li>22 new database icons</li> +<li>24 new street sign icons</li> +<li>New globe icons</li> +<li>New EV, taxi, bus, and scooter transportation icons</li> +<li>New rockets</li> +<li>and more!</li> +</ul> +<p>We also fixed the fill rules for several some issues across the docs, including:</p> +<ul> +<li>De-duped category names <code>Brand</code> and <code>Brands</code> to be just <code>Brand</code></li> +<li>Updated tags on several icon pages for additional aliases</li> +</ul> +<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> +<h2 id="install">Install</h2> +<p>To get started, install or update via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>Or Composer:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.9.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.9.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> + + </div> + + <div class="related"> + <h2>Related posts</h2> + <ul class="related-posts list-unstyled"> + <li> + <h4> + <a href="/2022/07/13/bootstrap-icons-1-9-0/"> + Bootstrap Icons v1.9.0 + <small>13 Jul 2022</small> + </a> + </h4> + </li><li> + <h4> + <a href="/2022/05/13/bootstrap-icons-1-8-2/"> + Bootstrap Icons v1.8.2 + <small>13 May 2022</small> + </a> + </h4> + </li><li> + <h4> + <a href="/2022/01/31/bootstrap-icons-1-8-0/"> + Bootstrap Icons v1.8.0 + <small>31 Jan 2022</small> + </a> + </h4> + </li> + </ul> + </div> +</div> + </div> + </div> + </div> + + <footer class="bd-footer py-4 py-md-5 mt-5 bg-light"> + <div class="container py-4 py-md-5 px-4 px-md-3"> + <div class="row"> + <div class="col-lg-3 mb-3"> + <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg> + <span class="fs-5">Bootstrap</span> + </a> + <ul class="list-unstyled small text-muted"> + <li class="mb-2">Designed and built with all the love in the world by the <a href="https://getbootstrap.com/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/blog/graphs/contributors">our contributors</a>.</li> + </ul> + </div> + <div class="col-6 col-lg-2 offset-lg-1 mb-3"> + <h5>Links</h5> + <ul class="list-unstyled"> + <li class="mb-2"><a href="https://getbootstrap.com/">Home</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/">Docs</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/examples/">Examples</a></li> + <li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li> + <li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li> + <li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li> + <li class="mb-2"><a href="">Swag Store</a></li> + </ul> + </div> + <div class="col-6 col-lg-2 mb-3"> + <h5>Guides</h5> + <ul class="list-unstyled"> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/">Getting started</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/examples/starter-template/">Starter template</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Webpack</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Parcel</a></li> + <li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Vite</a></li> + </ul> + </div> + <div class="col-6 col-lg-2 mb-3"> + <h5>Projects</h5> + <ul class="list-unstyled"> + <li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li> + <li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li> + <li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li> + <li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li> + <li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li> + </ul> + </div> + <div class="col-6 col-lg-2 mb-3"> + <h5>Community</h5> + <ul class="list-unstyled"> + <li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li> + <li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li> + <li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li> + <li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li> + <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li> + </ul> + </div> + </div> + </div> +</footer> + + + <script async src="/js/bootstrap.min.js"></script> + +<script> + (function(w, d) { + var b = d.getElementsByTagName('body')[0]; + var s = d.createElement('script'); + var io = 'IntersectionObserver' in w && 'IntersectionObserverEntry' in w && + 'intersectionRatio' in w.IntersectionObserverEntry.prototype && + 'isIntersecting' in w.IntersectionObserverEntry.prototype; + var v = io ? '17.x' : '8.x'; + s.async = true; + s.src = '/assets/js/vendor/lazyload.' + v + '.iife.min.js'; + w.lazyLoadOptions = { + elements_selector: '.lazy', + threshold: 150 + }; + b.appendChild(s); + }(window, document)); +</script> + + </body> +</html> diff --git a/archive/index.html b/archive/index.html index e8c7f492..8e1d3762 100644 --- a/archive/index.html +++ b/archive/index.html @@ -204,6 +204,9 @@ <h3>2022</h3> <ul class="list mb-5"> <li> + <a href="/2022/11/11/bootstrap-icons-1-10-0/">Bootstrap Icons v1.10.0</a> + <span title="11 Nov 22 00:01 UTC">Nov 11, 2022</span> + </li><li> <a href="/2022/10/03/bootstrap-5-2-2/">Bootstrap 5.2.2</a> <span title="03 Oct 22 08:00 UTC">Oct 03, 2022</span> </li><li> diff --git a/assets/img/2022/11/bootstrap-icons-v1100.png b/assets/img/2022/11/bootstrap-icons-v1100.png Binary files differnew file mode 100644 index 00000000..e81d5b33 --- /dev/null +++ b/assets/img/2022/11/bootstrap-icons-v1100.png @@ -6,7 +6,47 @@ <description>Recent content on Bootstrap Blog</description> <generator>Hugo -- gohugo.io</generator> <language>en</language> - <lastBuildDate>Mon, 03 Oct 2022 08:00:00 +0000</lastBuildDate><atom:link href="https://blog.getbootstrap.com/feed.xml" rel="self" type="application/rss+xml" /> + <lastBuildDate>Fri, 11 Nov 2022 00:01:00 +0000</lastBuildDate><atom:link href="https://blog.getbootstrap.com/feed.xml" rel="self" type="application/rss+xml" /> + <item> + <title>Bootstrap Icons v1.10.0</title> + <link>https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/</link> + <pubDate>Fri, 11 Nov 2022 00:01:00 +0000</pubDate> + + <guid>https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/</guid> + <description><p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.10.0</a> is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We&rsquo;re now at <strong>over 1,900 icons</strong>!</p> +<h2 id="150-new-icons">150 new icons</h2> +<p>Here&rsquo;s a quick look at all the new icons in v1.10.0:</p> +<p><img src="https://blog.getbootstrap.com/assets/img/2022/11/bootstrap-icons-v1100.png" class="d-block img-fluid mb-2 rounded border" alt="New love icons in v1.10.0" loading="lazy" width="1520" height="1664"> +</p> +<p>Some highlights for the new icons include:</p> +<ul> +<li>22 new person icons</li> +<li>26 new house icons</li> +<li>24 new building icons, including a renamed <code>building</code> to <code>buildings</code></li> +<li>22 new database icons</li> +<li>24 new street sign icons</li> +<li>New globe icons</li> +<li>New EV, taxi, bus, and scooter transportation icons</li> +<li>New rockets</li> +<li>and more!</li> +</ul> +<p>We also fixed the fill rules for several some issues across the docs, including:</p> +<ul> +<li>De-duped category names <code>Brand</code> and <code>Brands</code> to be just <code>Brand</code></li> +<li>Updated tags on several icon pages for additional aliases</li> +</ul> +<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> +<h2 id="install">Install</h2> +<p>To get started, install or update via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>Or Composer:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.9.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.9.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>The Figma file is now published to the Figma Community! It&rsquo;s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you&rsquo;ve seen from previous releases, just a little more accessible to those using the app.</p> +</description> + </item> + <item> <title>Bootstrap 5.2.2</title> <link>https://blog.getbootstrap.com/2022/10/03/bootstrap-5-2-2/</link> @@ -774,28 +814,5 @@ </description> </item> - <item> - <title>Bootstrap Icons v1.7.0</title> - <link>https://blog.getbootstrap.com/2021/11/01/bootstrap-icons-1-7-0/</link> - <pubDate>Mon, 01 Nov 2021 00:00:00 +0000</pubDate> - - <guid>https://blog.getbootstrap.com/2021/11/01/bootstrap-icons-1-7-0/</guid> - <description><p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.7.0</a> is here with 120 new and updated icons, taking us over 1,500 total icons for the project! It&rsquo;s the largest update since the initial release, so keep reading to see what&rsquo;s new.</p> -<h2 id="120-new-icons">120 new icons</h2> -<p>This update was a lot of fun for me—drawing all these tiny computer parts most of all! There are dozens of new computer-related icons for parts, ports, and peripheral devices. There are also several new brand icons, including Meta, and some other fun icons like a new robot head and a boombox.</p> -<p><img src="https://blog.getbootstrap.com/assets/img/2021/11/icons-v170.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.7.0" loading="lazy" width="1620" height="720"> -</p> -<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> -<h2 id="install">Install</h2> -<p>To get started, install or update via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons -</span></span></code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons -</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> -<h2 id="figma">Figma</h2> -<p>The Figma file is now published to the Figma Community! It&rsquo;s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you&rsquo;ve seen from previous releases, just a little more accessible to those using the app.</p> -</description> - </item> - </channel> </rss> @@ -203,6 +203,65 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2022/11/11/bootstrap-icons-1-10-0/" class="text-decoration-none"> + Bootstrap Icons v1.10.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="11 Nov 22 00:01 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + November 11, 2022 + </span> +</div> + + + + + <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.10.0</a> is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at <strong>over 1,900 icons</strong>!</p> +<h2 id="150-new-icons">150 new icons</h2> +<p>Here’s a quick look at all the new icons in v1.10.0:</p> +<p><img src="/assets/img/2022/11/bootstrap-icons-v1100.png" class="d-block img-fluid mb-2 rounded border" alt="New love icons in v1.10.0" loading="lazy" width="1520" height="1664"> +</p> +<p>Some highlights for the new icons include:</p> +<ul> +<li>22 new person icons</li> +<li>26 new house icons</li> +<li>24 new building icons, including a renamed <code>building</code> to <code>buildings</code></li> +<li>22 new database icons</li> +<li>24 new street sign icons</li> +<li>New globe icons</li> +<li>New EV, taxi, bus, and scooter transportation icons</li> +<li>New rockets</li> +<li>and more!</li> +</ul> +<p>We also fixed the fill rules for several some issues across the docs, including:</p> +<ul> +<li>De-duped category names <code>Brand</code> and <code>Brands</code> to be just <code>Brand</code></li> +<li>Updated tags on several icon pages for additional aliases</li> +</ul> +<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> +<h2 id="install">Install</h2> +<p>To get started, install or update via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>Or Composer:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.9.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.9.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2022/10/03/bootstrap-5-2-2/" class="text-decoration-none"> Bootstrap 5.2.2 </a> @@ -212,7 +271,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="03 Oct 22 08:00 UTC"> @@ -627,62 +686,6 @@ <h2 id="support-the-team">Support the team</h2> <p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2022/07/13/bootstrap-icons-1-9-0/" class="text-decoration-none"> - Bootstrap Icons v1.9.0 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="13 Jul 22 00:01 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - July 13, 2022 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/Z6_ZNW1DACE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.9.0</a> is here with over 140 new and updated icons, including some longstanding requests for new brands, transportation options, numbers and letters, and so much more. With this release, we’re now at <strong>over 1,800 icons</strong>!</p> -<h2 id="140-new-icons">140+ new icons</h2> -<p>Here’s a quick look at all the new icons in v1.9.0:</p> -<p><img src="/assets/img/2022/07/bootstrap-icons-v190.png" class="d-block img-fluid mb-2 rounded border" alt="New love icons in v1.9.0" loading="lazy" width="1544" height="1544"> -</p> -<ul> -<li>Tons of new brand icons including popular browsers, Ubuntu, Google Play, Android, Dropbox, and many more.</li> -<li>New transportation icons including cars, trains, planes, fuel, and common road signs.</li> -<li>New number and letter icons for 1-9, R, C, CC, H, and P (for use cases like registered trademark, copyright, Creative Commons, hospital or helicopter, and parking).</li> -<li>New medical icons for prescriptions, pills, and viruses.</li> -<li>New keyboard icons for tab and escape.</li> -<li>New Universal Access cions.</li> -<li>Redrawn cup icon, now with a steam variant for hot beverages.</li> -<li>Fire, finally!</li> -</ul> -<p>There are a handful more in there as well, so have a look and put them to use in your next update! In addition, we’ve updated our docs to include mention of Composer installs.</p> -<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> -<h2 id="install">Install</h2> -<p>To get started, install or update via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons -</span></span></code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons -</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.9.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.9.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> -<h2 id="figma">Figma</h2> -<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> - </div> </div> diff --git a/page/10/index.html b/page/10/index.html index c4982124..a88cbecd 100644 --- a/page/10/index.html +++ b/page/10/index.html @@ -203,6 +203,58 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2019/11/26/bootstrap-4-4-0/" class="text-decoration-none"> + Bootstrap 4.4.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="26 Nov 19 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + November 26, 2019 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/P5ZJui3aPoQ?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap 4 has a new update with a handful of feature changes. We’ve had quite the lengthy pull request to add responsive containers—big thanks to the developers who contribute to Bootstrap for sticking with it and helping us along the way. Nearly all new features will be carried forward into Bootstrap 5, so feel free to start using them now.</p> +<h2 id="highlights">Highlights</h2> +<p>Here’s what you need to know about v4.4.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work.</p> +<ul> +<li><strong>New responsive containers!</strong> Over a year in the making, fluid up to a particular breakpoint, available for all responsive tiers.</li> +<li><strong>New responsive <code>.row-cols</code> classes</strong> for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.</li> +<li><strong>New <code>escape-svg()</code> function</strong> for simplifying our embedded <code>background-image</code> SVGs for forms and more.</li> +<li><strong>New <code>add()</code> and <code>subtract()</code> functions</strong> for avoiding errors and zero values from CSS’s built in <code>calc</code> feature.</li> +<li><strong>New <code>make-col-auto()</code> mixin</strong> to make our <code>.col-auto</code> class available with custom HTML.</li> +<li>Fixed an issue with Microsoft Edge not picking up <code>:disabled</code> styles by moving selectors to <code>[disabled]</code>.</li> +<li><strong>Deprecated:</strong> <code>bg-variant()</code>, <code>nav-divider()</code>, and <code>form-control-focus()</code> mixins are now deprecated as they’re going away in v5.</li> +<li>Updated our spacing and alignment for modal footer elements like buttons to automatically wrap when space is constrained.</li> +<li>More flexible form control validation styles thanks to fewer chained selectors. Also updated the <code>:invalid</code> validation icon to be an alert instead of an <code>&times;</code> to avoid confusion with browser functionality for clearing the form field value.</li> +<li>Fixed a couple dozen CSS and JS bugs.</li> +<li>Moved to GitHub Actions for CI/CD! Expect more updates to our CI setup over time here while Actions evolves.</li> +<li>Updated documentation to fix links and typos, improved landmarks for secondary navigation, and a new security doc for guidelines on reporting potential vulnerabilities.</li> +</ul> +<p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/issues?q=project%3Atwbs%2Fbootstrap%2F18+is%3Aclosed+sort%3Aupdated-desc">v4.4.0 ship list of closed issues and merged pull requests</a> for more details.</p> +<p><a href="https://getbootstrap.com/docs/4.4/">Head to to the v4.4.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</p> +<h2 id="support-the-team">Support the team</h2> +<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2019/11/26/bootstrap-icons/" class="text-decoration-none"> Introducing Bootstrap Icons </a> @@ -212,7 +264,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="26 Nov 19 00:00 UTC"> @@ -225,7 +277,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/eM8Ss28zjcE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/eM8Ss28zjcE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -394,69 +446,6 @@ </ul> <p>We’ll have even more to share soon around v5’s plans after we tackle these bigger items. In the meantime, keep the feedback coming on GitHub and Twitter!</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2018/12/21/bootstrap-4-2-1/" class="text-decoration-none"> - Bootstrap 4.2.1 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="21 Dec 18 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - December 21, 2018 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/4N1iwQxiHrs?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Look out world, we’re shipping Bootstrap v4.2.1 with a slew of new features, bug fixes, and docs updates. On the new features side, we have spinners, toasts, switches, and (finally!) touch support in the carousel. That’s just the tip of the iceberg though.</p> -<p><strong>Heads up!</strong> v4.2.0 was incorrectly published to npm, so we’ve had to immediately turnaround a v4.2.1 release. <code>npm i bootstrap@latest</code> should now return <code>4.2.1</code>. Apologies for the inconvenience!</p> -<p>We’ve crammed months of work into v4.2.1 with over 400 commits since our last v4.1.3 release. As mentioned in our v3.4.0 release last week, we’re working to decouple our releases from my direct involvement to improve the shipping cadence. Expect more improvements there in 2019.</p> -<p>Keep reading for highlights and some insight into how we’re getting to v4.3 quickly, and then into v5 (woo!).</p> -<h2 id="whats-new">What’s new</h2> -<p>Here are the highlights of what’s new and updated in v4.2.1.</p> -<p><img src="/assets/img/2018/12/toasts.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap toasts" loading="lazy" width="1564" height="520"> -</p> -<ul> -<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/4.2/components/spinners/">spinner loading component</a>.</li> -<li><strong>New:</strong> Added new <a href="https://getbootstrap.com/docs/4.2/components/toasts/">toast component</a> for displaying notifications.</li> -<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/4.2/components/forms/#switches">iOS style switch</a> (a modifier class to our custom checkboxes).</li> -<li><strong>New:</strong> Added touch support in our carousel component.</li> -<li><strong>New:</strong> Added <code>.font-weight-lighter</code> and <code>.font-weight-bolder</code> utilities.</li> -<li><strong>New:</strong> Added <code>.text-decoration-none</code> utility class.</li> -<li><strong>New:</strong> Added <code>.modal-xl</code> modifier class for our modals.</li> -<li><strong>New:</strong> Added new negative margin utility classes (e.g., <code>.mb-n3</code>). These rad new classes not only allow you more control over your general spacing needs, but also allow you to create responsive grid gutters at each breakpoint.</li> -<li><strong>New:</strong> Validated form fields now have feedback icons on <code>:invalid</code> and <code>:valid</code> fields. Disable them with the <code>$enable-validation-icons</code> boolean Sass variable (defaults to <code>true</code>).</li> -<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/versions/">versions page</a> to our docs.</li> -<li><strong>New:</strong> Tooltips/Popovers work with Shadow DOM.</li> -<li><strong>Updated:</strong> Redesigned the custom checkboxes and radios for more obvious states.</li> -<li><strong>Updated:</strong> <code>bootstrap-grid.css</code> now includes our <code>margin</code> and <code>padding</code> utilities for full control of our grid system.</li> -<li><strong>Updated:</strong> Changed auto columns (e.g., <code>.col-auto</code>) from <code>max-width: none</code> to <code>max-width: 100%</code> to prevent content from causing a column to overflow the parent.</li> -<li><strong>Updated:</strong> Improved rendering of custom selects, ranges, file input, and more.</li> -</ul> -<p>Checkout the full <a href="https://github.com/twbs/bootstrap/issues/26952">v4.2.0 ship list</a> and <a href="https://github.com/twbs/bootstrap/projects/6">GitHub project</a> for the full details. Up next is <a href="https://github.com/twbs/bootstrap/projects/16">v4.3</a> with some bugfixes, a few new modifier classes and variables, and some new utilities.</p> -<p><a href="https://getbootstrap.com/docs/4.2/">Head to the v4.2 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the Bootstrap CDN and Rubygems.</p> -<h2 id="whats-next">What’s next</h2> -<p>We have <a href="https://github.com/twbs/bootstrap/projects/16">v4.3</a> already planned, so that’s our immediate focus. However, while we’re developing that in the <code>v4-dev</code> branch, we’ll be getting our plans in order for a v5 release.</p> -<p>Bootstrap 5 will not feature drastic changes to the codebase. While I tweeted about the earnestness to move to PostCSS years ago, we’ll still be on Sass for v5. Instead, we’ll focus our efforts on removing cruft, improving existing components, and dropping old browsers and our jQuery dependency. There are also some updates to our v4.x components we cannot make without causing breaking changes, so v5 feels like it’s coming at the right time for us.</p> -<p>Stay tuned for a preview of the plans for v5 in the new year. We’ll share via an issue, ask for feedback, and then settle in to development mode.</p> -<p>Happy holidays, and happy new year to everyone! Thanks for continuing to make Bootstrap an amazing project and community.</p> - </div> </div> diff --git a/page/11/index.html b/page/11/index.html index a856f79f..9382c934 100644 --- a/page/11/index.html +++ b/page/11/index.html @@ -203,6 +203,69 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2018/12/21/bootstrap-4-2-1/" class="text-decoration-none"> + Bootstrap 4.2.1 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="21 Dec 18 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + December 21, 2018 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/4N1iwQxiHrs?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Look out world, we’re shipping Bootstrap v4.2.1 with a slew of new features, bug fixes, and docs updates. On the new features side, we have spinners, toasts, switches, and (finally!) touch support in the carousel. That’s just the tip of the iceberg though.</p> +<p><strong>Heads up!</strong> v4.2.0 was incorrectly published to npm, so we’ve had to immediately turnaround a v4.2.1 release. <code>npm i bootstrap@latest</code> should now return <code>4.2.1</code>. Apologies for the inconvenience!</p> +<p>We’ve crammed months of work into v4.2.1 with over 400 commits since our last v4.1.3 release. As mentioned in our v3.4.0 release last week, we’re working to decouple our releases from my direct involvement to improve the shipping cadence. Expect more improvements there in 2019.</p> +<p>Keep reading for highlights and some insight into how we’re getting to v4.3 quickly, and then into v5 (woo!).</p> +<h2 id="whats-new">What’s new</h2> +<p>Here are the highlights of what’s new and updated in v4.2.1.</p> +<p><img src="/assets/img/2018/12/toasts.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap toasts" loading="lazy" width="1564" height="520"> +</p> +<ul> +<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/4.2/components/spinners/">spinner loading component</a>.</li> +<li><strong>New:</strong> Added new <a href="https://getbootstrap.com/docs/4.2/components/toasts/">toast component</a> for displaying notifications.</li> +<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/4.2/components/forms/#switches">iOS style switch</a> (a modifier class to our custom checkboxes).</li> +<li><strong>New:</strong> Added touch support in our carousel component.</li> +<li><strong>New:</strong> Added <code>.font-weight-lighter</code> and <code>.font-weight-bolder</code> utilities.</li> +<li><strong>New:</strong> Added <code>.text-decoration-none</code> utility class.</li> +<li><strong>New:</strong> Added <code>.modal-xl</code> modifier class for our modals.</li> +<li><strong>New:</strong> Added new negative margin utility classes (e.g., <code>.mb-n3</code>). These rad new classes not only allow you more control over your general spacing needs, but also allow you to create responsive grid gutters at each breakpoint.</li> +<li><strong>New:</strong> Validated form fields now have feedback icons on <code>:invalid</code> and <code>:valid</code> fields. Disable them with the <code>$enable-validation-icons</code> boolean Sass variable (defaults to <code>true</code>).</li> +<li><strong>New:</strong> Added a new <a href="https://getbootstrap.com/docs/versions/">versions page</a> to our docs.</li> +<li><strong>New:</strong> Tooltips/Popovers work with Shadow DOM.</li> +<li><strong>Updated:</strong> Redesigned the custom checkboxes and radios for more obvious states.</li> +<li><strong>Updated:</strong> <code>bootstrap-grid.css</code> now includes our <code>margin</code> and <code>padding</code> utilities for full control of our grid system.</li> +<li><strong>Updated:</strong> Changed auto columns (e.g., <code>.col-auto</code>) from <code>max-width: none</code> to <code>max-width: 100%</code> to prevent content from causing a column to overflow the parent.</li> +<li><strong>Updated:</strong> Improved rendering of custom selects, ranges, file input, and more.</li> +</ul> +<p>Checkout the full <a href="https://github.com/twbs/bootstrap/issues/26952">v4.2.0 ship list</a> and <a href="https://github.com/twbs/bootstrap/projects/6">GitHub project</a> for the full details. Up next is <a href="https://github.com/twbs/bootstrap/projects/16">v4.3</a> with some bugfixes, a few new modifier classes and variables, and some new utilities.</p> +<p><a href="https://getbootstrap.com/docs/4.2/">Head to the v4.2 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the Bootstrap CDN and Rubygems.</p> +<h2 id="whats-next">What’s next</h2> +<p>We have <a href="https://github.com/twbs/bootstrap/projects/16">v4.3</a> already planned, so that’s our immediate focus. However, while we’re developing that in the <code>v4-dev</code> branch, we’ll be getting our plans in order for a v5 release.</p> +<p>Bootstrap 5 will not feature drastic changes to the codebase. While I tweeted about the earnestness to move to PostCSS years ago, we’ll still be on Sass for v5. Instead, we’ll focus our efforts on removing cruft, improving existing components, and dropping old browsers and our jQuery dependency. There are also some updates to our v4.x components we cannot make without causing breaking changes, so v5 feels like it’s coming at the right time for us.</p> +<p>Stay tuned for a preview of the plans for v5 in the new year. We’ll share via an issue, ask for feedback, and then settle in to development mode.</p> +<p>Happy holidays, and happy new year to everyone! Thanks for continuing to make Bootstrap an amazing project and community.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2018/12/13/bootstrap-3-4-0/" class="text-decoration-none"> Bootstrap 3.4.0 </a> @@ -212,7 +275,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="13 Dec 18 00:00 UTC"> @@ -225,7 +288,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/8WEtxJ4-sh4?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/8WEtxJ4-sh4?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -394,61 +457,6 @@ </ul> <p>Checkout the full <a href="https://github.com/twbs/bootstrap/issues/25971">v4.1.1 ship list</a> and <a href="https://github.com/twbs/bootstrap/projects/13">GitHub project</a> for the full details. Up next will be <a href="https://github.com/twbs/bootstrap/projects/14">v4.1.2</a>, another patch release to address the next set of CSS and JS bugs you’ve help share with us since v4 launched.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2018/04/09/bootstrap-4-1/" class="text-decoration-none"> - Bootstrap 4.1 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="09 Apr 18 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - April 09, 2018 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/3wxyN3z9PL4?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Two months ago we shipped the <a href="/2018/01/18/bootstrap-4/">first major release of Bootstrap 4</a> and we’re thrilled y’all love the latest release and <a href="/2018/02/21/new-bootstrap-themes/">our brand new themes</a> so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we intended, but there’s still a boatload of fixes, docs updates, build tool changes, and even a few small new features.</p> -<h2 id="updated-docs-url">Updated docs URL</h2> -<p>With the release of v4 stable, we moved to a versioned docs setup, meaning each minor release would bring with it a new hosted version of our docs. This allows folks who haven’t yet upgraded stick to the docs they know and love and avoids breaking URLs across the web. With today’s release, our we’ll have a new URL for this release’s documentation, <code>getbootstrap.com/docs/4.1/</code>. The previous URL, <code>getbootstrap.com/docs/4.0/</code> will still work as y’all would imagine.</p> -<h2 id="highlights">Highlights</h2> -<p>Here’s what’s new in addition to our bug fixes and docs updates:</p> -<ul> -<li>Added new custom range form control.</li> -<li>Added new <code>.carousel-fade</code> modifier to switch carousel from horizontal sliding to crossfade.</li> -<li>Added new <code>.dropdown-item-text</code> for plaintext dropdown items.</li> -<li>Added new <code>.flex-fill</code>, <code>.flex-grow-*</code>, and <code>.flex-shrink-*</code> utilities.</li> -<li>Added new <code>.table-borderless</code> variant for tables.</li> -<li>Added new <code>.text-monospace</code> utility.</li> -<li>Added new <code>.text-body</code> (default body color), <code>.text-black-50</code> (50% opacity black), and <code>.text-white-50</code> (50% opacity white) utilities.</li> -<li>Added new <code>.shadow-*</code> utilities for quickly adding <code>box-shadow</code>s.</li> -<li>Added ability to disable Popper’s positioning in dropdowns.</li> -<li>Updated our Theming docs to confirm you <em>cannot</em> use CSS variables in media queries (sorry folks!).</li> -<li>Fixed longstanding issue with Chrome rendering CSS columns incorrectly for cards.</li> -<li>Deprecated <code>.text-hide</code>—you’ll see a warning during compilation—as it’s a dated and undocumented feature.</li> -<li>Fixed up Dashboard and Offcanvas examples across Firefox and IE.</li> -<li>Breadcrumbs can now use non-string values as dividers.</li> -</ul> -<p>Be sure to look at the <a href="https://github.com/twbs/bootstrap/issues/25375">ship list</a> and <a href="https://github.com/twbs/bootstrap/projects/5">project board</a> for more details on all our fixes. Also, as a small heads up, we’ve split our issue template on GitHub into two separate templates, one for feature requests and one for bug reports. Please let us know if you have any feedback on the change.</p> -<h2 id="next-release">Next release</h2> -<p>Next up, we’re looking at a <a href="https://github.com/twbs/bootstrap/projects/13">v4.1.1 release</a>. There are some bug fixes for input groups, form fields, and more that I know we need to tackle sooner than later. These were supposed to be in v4.1, but we couldn’t make it happen in time.</p> - </div> </div> diff --git a/page/12/index.html b/page/12/index.html index 1aaf391d..2cd4aab0 100644 --- a/page/12/index.html +++ b/page/12/index.html @@ -203,6 +203,61 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2018/04/09/bootstrap-4-1/" class="text-decoration-none"> + Bootstrap 4.1 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="09 Apr 18 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + April 09, 2018 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/3wxyN3z9PL4?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Two months ago we shipped the <a href="/2018/01/18/bootstrap-4/">first major release of Bootstrap 4</a> and we’re thrilled y’all love the latest release and <a href="/2018/02/21/new-bootstrap-themes/">our brand new themes</a> so much. Today we’re shipping our first minor release, v4.1! This release comes later than expected and some of the fixes we intended, but there’s still a boatload of fixes, docs updates, build tool changes, and even a few small new features.</p> +<h2 id="updated-docs-url">Updated docs URL</h2> +<p>With the release of v4 stable, we moved to a versioned docs setup, meaning each minor release would bring with it a new hosted version of our docs. This allows folks who haven’t yet upgraded stick to the docs they know and love and avoids breaking URLs across the web. With today’s release, our we’ll have a new URL for this release’s documentation, <code>getbootstrap.com/docs/4.1/</code>. The previous URL, <code>getbootstrap.com/docs/4.0/</code> will still work as y’all would imagine.</p> +<h2 id="highlights">Highlights</h2> +<p>Here’s what’s new in addition to our bug fixes and docs updates:</p> +<ul> +<li>Added new custom range form control.</li> +<li>Added new <code>.carousel-fade</code> modifier to switch carousel from horizontal sliding to crossfade.</li> +<li>Added new <code>.dropdown-item-text</code> for plaintext dropdown items.</li> +<li>Added new <code>.flex-fill</code>, <code>.flex-grow-*</code>, and <code>.flex-shrink-*</code> utilities.</li> +<li>Added new <code>.table-borderless</code> variant for tables.</li> +<li>Added new <code>.text-monospace</code> utility.</li> +<li>Added new <code>.text-body</code> (default body color), <code>.text-black-50</code> (50% opacity black), and <code>.text-white-50</code> (50% opacity white) utilities.</li> +<li>Added new <code>.shadow-*</code> utilities for quickly adding <code>box-shadow</code>s.</li> +<li>Added ability to disable Popper’s positioning in dropdowns.</li> +<li>Updated our Theming docs to confirm you <em>cannot</em> use CSS variables in media queries (sorry folks!).</li> +<li>Fixed longstanding issue with Chrome rendering CSS columns incorrectly for cards.</li> +<li>Deprecated <code>.text-hide</code>—you’ll see a warning during compilation—as it’s a dated and undocumented feature.</li> +<li>Fixed up Dashboard and Offcanvas examples across Firefox and IE.</li> +<li>Breadcrumbs can now use non-string values as dividers.</li> +</ul> +<p>Be sure to look at the <a href="https://github.com/twbs/bootstrap/issues/25375">ship list</a> and <a href="https://github.com/twbs/bootstrap/projects/5">project board</a> for more details on all our fixes. Also, as a small heads up, we’ve split our issue template on GitHub into two separate templates, one for feature requests and one for bug reports. Please let us know if you have any feedback on the change.</p> +<h2 id="next-release">Next release</h2> +<p>Next up, we’re looking at a <a href="https://github.com/twbs/bootstrap/projects/13">v4.1.1 release</a>. There are some bug fixes for input groups, form fields, and more that I know we need to tackle sooner than later. These were supposed to be in v4.1, but we couldn’t make it happen in time.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2018/02/21/new-bootstrap-themes/" class="text-decoration-none"> New Bootstrap themes </a> @@ -212,7 +267,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="21 Feb 18 00:00 UTC"> @@ -225,7 +280,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/atxUuldUcfI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/atxUuldUcfI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -519,62 +574,6 @@ <hr> <p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/23278">Beta 2 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/projects/4">Beta 2 project</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2017/08/10/bootstrap-4-beta/" class="text-decoration-none"> - Bootstrap 4 Beta - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="10 Aug 17 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - August 10, 2017 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/aQUlA8Hcv4s?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p><a href="/2015/08/19/bootstrap-4-alpha/">Two years in the making</a>, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure. Put simply? <a href="https://www.youtube.com/watch?v=_J6-3l3hCm0">It’s about time.</a></p> -<h2 id="beta">Beta!?</h2> -<p>Long story short, shipping a beta means we’re done breaking all your stuff until our next major version (v5). We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away.</p> -<p>For those who haven’t been using the v4 alpha releases, here are some highlights to get you caught up.</p> -<ul> -<li><strong>Moved from Less to Sass.</strong> Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.</li> -<li><strong>Flexbox and an improved grid system.</strong> We’ve moved nearly everything to flexbox, added a new grid tier to better target mobile devices, and completely overhauled our source Sass with better variables, mixins, and now maps, too.</li> -<li><strong>Dropped wells, thumbnails, and panels for cards.</strong> <a href="https://getbootstrap.com/docs/4.0/components/card/">Cards</a> are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.</li> -<li><strong>Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.</strong> Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like <code>box-sizing: border-box</code>, margin tweaks, and more all in a single Sass file.</li> -<li><strong>Brand new customization options.</strong> Instead of relegating style embellishments like gradients, transitions, shadows, grid classes, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.</li> -<li><strong>Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing</strong> to take advantage of newer CSS support. Aside from our grid, pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. Need support for IE8/IE9, Safari 8-, iOS 8-, etc? Keep using Bootstrap 3.</li> -<li><strong>Rewrote all our JavaScript plugins.</strong> Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements with new teardown methods, option type checking, new methods, and more.</li> -<li><strong>Improved auto-placement of tooltips, popovers, and dropdowns</strong> thanks to the help of a library called <a href="https://popper.js.org">Popper.js</a>.</li> -<li><strong>Redesigned and improved documentation.</strong> We redesigned it, rewrote it all in Markdown, and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. We also added an amazing new search form!</li> -<li><strong>New build tools</strong> completely rewritten in npm scripts instead of Grunt, immensely simplifying the process of developing and contributing to Bootstrap.</li> -<li><strong>And so much more!</strong> Custom form controls, a redesigned carousel, an overhauled navbar, HTML5 form validation styles, hundreds of responsive utility classes, new components, and more have also been included.</li> -</ul> -<p>Okay, phew, want to learn even more? Keep reading, or jump right to <a href="https://getbootstrap.com/">those brand new docs</a>!</p> -<h2 id="new-look">New look</h2> -<p>Bootstrap 4 has been sporting a slightly updated look throughout our alpha releases, but it wasn’t until recently that we gave the docs and our components a refresh, too.</p> -<p><a href="https://getbootstrap.com/"><img src="/assets/img/2017/bootstrap-4-beta.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 4 beta docs" loading="lazy" width="2866" height="1976"> -</a></p> -<p>In addition to a new color palette and new systems fonts, we have a brand new layout for our documentation. New with this beta is an amazing search form powered by Algolia’s <a href="https://community.algolia.com/docsearch/">DocSearch</a>, an improved page layout with stickied navbar and sidebar, and a new table of contents.</p> -<hr> -<p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/21568">Beta 1 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/41?closed=1">closed Beta 1 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> - </div> </div> diff --git a/page/13/index.html b/page/13/index.html index ec67ec12..dc07660a 100644 --- a/page/13/index.html +++ b/page/13/index.html @@ -203,6 +203,62 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2017/08/10/bootstrap-4-beta/" class="text-decoration-none"> + Bootstrap 4 Beta + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="10 Aug 17 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + August 10, 2017 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/aQUlA8Hcv4s?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p><a href="/2015/08/19/bootstrap-4-alpha/">Two years in the making</a>, we finally have our first beta release of Bootstrap 4. In that time, we’ve broken all the things at least twenty-seven times over with nearly 5,000 commits, 650+ files changed, 67,000 lines added, and 82,000 lines deleted. We also shipped six major alpha releases, a trio of official Themes, and even a job board for good measure. Put simply? <a href="https://www.youtube.com/watch?v=_J6-3l3hCm0">It’s about time.</a></p> +<h2 id="beta">Beta!?</h2> +<p>Long story short, shipping a beta means we’re done breaking all your stuff until our next major version (v5). We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away.</p> +<p>For those who haven’t been using the v4 alpha releases, here are some highlights to get you caught up.</p> +<ul> +<li><strong>Moved from Less to Sass.</strong> Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers.</li> +<li><strong>Flexbox and an improved grid system.</strong> We’ve moved nearly everything to flexbox, added a new grid tier to better target mobile devices, and completely overhauled our source Sass with better variables, mixins, and now maps, too.</li> +<li><strong>Dropped wells, thumbnails, and panels for cards.</strong> <a href="https://getbootstrap.com/docs/4.0/components/card/">Cards</a> are a brand new component to Bootstrap, but they’ll feel super familiar as they do nearly everything wells, thumbnails, and panels did, only better.</li> +<li><strong>Forked Normalize.css and consolidated all our HTML resets into a new CSS module, Reboot.</strong> Normalize.css has taken a different path than we’d prefer, dropping some core CSS tweaks we’ve long depended upon. Reboot takes the core of Normalize.css and expands it to include more opinionated resets like <code>box-sizing: border-box</code>, margin tweaks, and more all in a single Sass file.</li> +<li><strong>Brand new customization options.</strong> Instead of relegating style embellishments like gradients, transitions, shadows, grid classes, and more to a separate stylesheet like v3, we’ve moved all those options into Sass variables. Want default transitions on everything or to disable rounded corners? Simply update a variable and recompile.</li> +<li><strong>Dropped IE8 and IE9 support, dropped older browser versions, and moved to rem units for component sizing</strong> to take advantage of newer CSS support. Aside from our grid, pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. Need support for IE8/IE9, Safari 8-, iOS 8-, etc? Keep using Bootstrap 3.</li> +<li><strong>Rewrote all our JavaScript plugins.</strong> Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript enhancements with new teardown methods, option type checking, new methods, and more.</li> +<li><strong>Improved auto-placement of tooltips, popovers, and dropdowns</strong> thanks to the help of a library called <a href="https://popper.js.org">Popper.js</a>.</li> +<li><strong>Redesigned and improved documentation.</strong> We redesigned it, rewrote it all in Markdown, and added a few handy plugins to streamline examples and code snippets to make working with our docs way easier. We also added an amazing new search form!</li> +<li><strong>New build tools</strong> completely rewritten in npm scripts instead of Grunt, immensely simplifying the process of developing and contributing to Bootstrap.</li> +<li><strong>And so much more!</strong> Custom form controls, a redesigned carousel, an overhauled navbar, HTML5 form validation styles, hundreds of responsive utility classes, new components, and more have also been included.</li> +</ul> +<p>Okay, phew, want to learn even more? Keep reading, or jump right to <a href="https://getbootstrap.com/">those brand new docs</a>!</p> +<h2 id="new-look">New look</h2> +<p>Bootstrap 4 has been sporting a slightly updated look throughout our alpha releases, but it wasn’t until recently that we gave the docs and our components a refresh, too.</p> +<p><a href="https://getbootstrap.com/"><img src="/assets/img/2017/bootstrap-4-beta.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 4 beta docs" loading="lazy" width="2866" height="1976"> +</a></p> +<p>In addition to a new color palette and new systems fonts, we have a brand new layout for our documentation. New with this beta is an amazing search form powered by Algolia’s <a href="https://community.algolia.com/docsearch/">DocSearch</a>, an improved page layout with stickied navbar and sidebar, and a new table of contents.</p> +<hr> +<p>For more details on this release’s changes, take a look at the <a href="https://github.com/twbs/bootstrap/issues/21568">Beta 1 ship list issue</a>, as well as the <a href="https://github.com/twbs/bootstrap/milestone/41?closed=1">closed Beta 1 milestone</a>. Be sure to <a href="https://bootstrap-slack.herokuapp.com">join our official Slack room!</a> and dive into <a href="https://github.com/twbs/bootstrap/issues/">our issue tracker</a> with bug reports, questions, and general feedback whenever possible.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2017/01/06/bootstrap-4-alpha-6/" class="text-decoration-none"> Bootstrap 4 Alpha 6 </a> @@ -212,7 +268,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="06 Jan 17 00:00 UTC"> @@ -225,7 +281,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/V44HiAX91Hs?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/V44HiAX91Hs?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -544,60 +600,6 @@ <h2 id="whats-next">What’s next?</h2> <p>More exploration, more bugfixes, more docs updates, and, best of all, more alphas. The daily grind keeps us super busy these days, but we’ll do our best to keep the momentum going. Stay tuned!</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2016/07/25/bootstrap-3-3-7-released/" class="text-decoration-none"> - Bootstrap 3.3.7 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" - src="https://github.com/cvrebert.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@cvrebert</span> - </a> - <span class="d-flex align-items-center ms-3" title="25 Jul 16 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - July 25, 2016 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/Kr0tTbTbmVA?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap 3.3.7 is here! We’ve had over 220 commits and 80 closed issues and pull requests from nearly 30 contributors since our last release. Woohoo!</p> -<p>Here are some of the highlights:</p> -<ul> -<li>Added support for jQuery 3.</li> -<li>Added inline source files into sourcemap eliminating <code>4xx</code> errors on the CDN.</li> -<li>Updated several devDependencies and gems.</li> -<li>Removed unsupported vendor prefixes for <code>@viewport</code>.</li> -</ul> -<p>For a complete breakdown, <a href="https://github.com/twbs/bootstrap/releases/tag/v3.3.7">read the release changelog</a> and the <a href="https://github.com/twbs/bootstrap/issues?q=milestone%3Av3.3.7+is%3Aclosed">v3.3.7 milestone</a>.</p> -<h2 id="download-bootstrap">Download Bootstrap</h2> -<p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> -<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.7.zip">Download Bootstrap 3.3.7</a></p> -<p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> -<h2 id="bootstrap-cdn">Bootstrap CDN</h2> -<p>After reviewing the changelog, update your CDN links to point to the v3.3.7 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</span></span></code></pre></div> </div> </div> diff --git a/page/14/index.html b/page/14/index.html index 77e7de92..68530763 100644 --- a/page/14/index.html +++ b/page/14/index.html @@ -203,6 +203,60 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2016/07/25/bootstrap-3-3-7-released/" class="text-decoration-none"> + Bootstrap 3.3.7 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" + src="https://github.com/cvrebert.png?size=32" + alt="" width="32" height="32"> + <span>@cvrebert</span> + </a> + <span class="d-flex align-items-center ms-3" title="25 Jul 16 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + July 25, 2016 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/Kr0tTbTbmVA?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap 3.3.7 is here! We’ve had over 220 commits and 80 closed issues and pull requests from nearly 30 contributors since our last release. Woohoo!</p> +<p>Here are some of the highlights:</p> +<ul> +<li>Added support for jQuery 3.</li> +<li>Added inline source files into sourcemap eliminating <code>4xx</code> errors on the CDN.</li> +<li>Updated several devDependencies and gems.</li> +<li>Removed unsupported vendor prefixes for <code>@viewport</code>.</li> +</ul> +<p>For a complete breakdown, <a href="https://github.com/twbs/bootstrap/releases/tag/v3.3.7">read the release changelog</a> and the <a href="https://github.com/twbs/bootstrap/issues?q=milestone%3Av3.3.7+is%3Aclosed">v3.3.7 milestone</a>.</p> +<h2 id="download-bootstrap">Download Bootstrap</h2> +<p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> +<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.7.zip">Download Bootstrap 3.3.7</a></p> +<p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> +<h2 id="bootstrap-cdn">Bootstrap CDN</h2> +<p>After reviewing the changelog, update your CDN links to point to the v3.3.7 files:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2015/12/08/bootstrap-4-alpha-2/" class="text-decoration-none"> New Bootstrap 4 alpha </a> @@ -212,7 +266,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="08 Dec 15 00:00 UTC"> @@ -225,7 +279,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/t4QK8RxCAwo?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/t4QK8RxCAwo?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -414,81 +468,6 @@ <p>To date, we’ve handled abandoned issues just like any other issues—with ad-hoc reviews. We felt that could be improved, so we made a bot to automate the process. No Carrier appears on our issue tracker as <a href="https://github.com/twbs-closer?tab=activity">@twbs-closer</a> and will monitor issues we tag with <a href="https://github.com/twbs/bootstrap/labels/awaiting%20reply"><code>awaiting-reply</code></a>. Should no one reply within two weeks, <strong>@twbs-closer</strong> will post a final comment explaining the situation and our policy, and then automatically close the issue. If someone later replies after the cutoff, a member of our team will happily reopen the issue manually and continue pursuing it.</p> <p>No Carrier is available for any GitHub project, not just Bootstrap. If you have a project on GitHub that might benefit from this automation, we invite you to try out No Carrier. For more details, usage instructions, and feedback, <a href="https://github.com/twbs/no-carrier">check out the No Carrier project on GitHub</a>. You can download the assembly JAR from the “Downloads” section of <a href="https://github.com/twbs/no-carrier/releases/tag/v1.0.0">the v1.0.0 release page</a>.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2015/06/15/bootstrap-3-3-5-released/" class="text-decoration-none"> - Bootstrap 3.3.5 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" - src="https://github.com/cvrebert.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@cvrebert</span> - </a> - <span class="d-flex align-items-center ms-3" title="15 Jun 15 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - June 15, 2015 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/vCadcBR95oU?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap 3.3.5 is here! This release has focused on bug fixes, accessibility improvements, and documentation updates. We’ve had over 330 commits and 160 closed issues and pull requests from over 40 contributors since our last release! Hell yeah.</p> -<p>Here are some of the highlights:</p> -<ul> -<li>Updated to Normalize.css v3.0.3.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/16359">Updated <code>main</code> in <code>bower.json</code> to comply with recent update to the <code>bower.json</code> specification</a></li> -<li>List groups now support <code><button></code> elements.</li> -<li>Cleaned up some extraneous <code>padding</code> on jumbotrons across various viewports.</li> -<li>Fixed input group sizing classes on all supported elements for real this time.</li> -<li>Applied a few tooltip and popover positioning fixes.</li> -<li>Fixed behavior when using tooltips and popovers that are triggered by multiple events.</li> -<li>Fixed some memory leakage in the tooltip and popover plugins.</li> -<li>Fixed incorrect Affix positioning when a webpage has a sticky footer.</li> -<li>Fixed npm package to include all Grunt scripts, so that <code>grunt dist</code> works if you installed Bootstrap from npm.</li> -</ul> -<p>For a complete breakdown, <a href="https://github.com/twbs/bootstrap/releases/tag/v3.3.5">read the release changelog</a> and the <a href="https://github.com/twbs/bootstrap/issues?q=milestone%3Av3.3.5+is%3Aclosed">v3.3.5 milestone</a>.</p> -<h2 id="bootstrap-slack">Bootstrap Slack</h2> -<p>Since we last shipped a release, we made an official Slack for folks to hang out with other Bootstrappers. Registration is completely open thanks to the <a href="https://github.com/rauchg/slackin">Slackin open source project</a>. We have two channels to start—general and help—and nearly 1,000 members to date!</p> -<p><strong><a href="https://bootstrap-slack.herokuapp.com/">Sign up here</a></strong> to join.</p> -<h2 id="wiredep-and-bower">wiredep and Bower</h2> -<p>Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the <code>main</code> field in <code>bower.json</code> works. Recently, <a href="https://github.com/bower/spec/pull/43">Bower updated their spec to address this and clarify how <code>main</code> should work</a>, and we <a href="https://github.com/twbs/bootstrap/pull/16359">updated our <code>bower.json</code> accordingly</a>. Unfortunately, <a href="https://github.com/twbs/bootstrap/issues/16663">wiredep broke as a result</a> if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is <a href="https://github.com/bower/spec/issues/47">working to further update their spec</a> to address this problem and better assist tools like wiredep.</p> -<p>In the meantime, a quick-and-dirty workaround to get wiredep to work with Bootstrap again is to add the following to your project’s <code>bower.json</code>:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> -</span></span><span class="line"><span class="cl"> <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> -</span></span><span class="line"><span class="cl"> <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"less/bootstrap.less"</span> -</span></span><span class="line"><span class="cl"> <span class="p">]</span> -</span></span><span class="line"><span class="cl"> <span class="p">}</span> -</span></span><span class="line"><span class="cl"><span class="p">}</span> -</span></span></code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> -<p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> -<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.5.zip">Download Bootstrap 3.3.5</a></p> -<p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> -<h2 id="bootstrap-cdn">Bootstrap CDN</h2> -<p>After reviewing the changelog, update your CDN links to point to the v3.3.5 files:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> -</span></span></code></pre></div> </div> </div> diff --git a/page/15/index.html b/page/15/index.html index bb8fdff6..a01cd505 100644 --- a/page/15/index.html +++ b/page/15/index.html @@ -203,6 +203,81 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2015/06/15/bootstrap-3-3-5-released/" class="text-decoration-none"> + Bootstrap 3.3.5 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" + src="https://github.com/cvrebert.png?size=32" + alt="" width="32" height="32"> + <span>@cvrebert</span> + </a> + <span class="d-flex align-items-center ms-3" title="15 Jun 15 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + June 15, 2015 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/vCadcBR95oU?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap 3.3.5 is here! This release has focused on bug fixes, accessibility improvements, and documentation updates. We’ve had over 330 commits and 160 closed issues and pull requests from over 40 contributors since our last release! Hell yeah.</p> +<p>Here are some of the highlights:</p> +<ul> +<li>Updated to Normalize.css v3.0.3.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/16359">Updated <code>main</code> in <code>bower.json</code> to comply with recent update to the <code>bower.json</code> specification</a></li> +<li>List groups now support <code><button></code> elements.</li> +<li>Cleaned up some extraneous <code>padding</code> on jumbotrons across various viewports.</li> +<li>Fixed input group sizing classes on all supported elements for real this time.</li> +<li>Applied a few tooltip and popover positioning fixes.</li> +<li>Fixed behavior when using tooltips and popovers that are triggered by multiple events.</li> +<li>Fixed some memory leakage in the tooltip and popover plugins.</li> +<li>Fixed incorrect Affix positioning when a webpage has a sticky footer.</li> +<li>Fixed npm package to include all Grunt scripts, so that <code>grunt dist</code> works if you installed Bootstrap from npm.</li> +</ul> +<p>For a complete breakdown, <a href="https://github.com/twbs/bootstrap/releases/tag/v3.3.5">read the release changelog</a> and the <a href="https://github.com/twbs/bootstrap/issues?q=milestone%3Av3.3.5+is%3Aclosed">v3.3.5 milestone</a>.</p> +<h2 id="bootstrap-slack">Bootstrap Slack</h2> +<p>Since we last shipped a release, we made an official Slack for folks to hang out with other Bootstrappers. Registration is completely open thanks to the <a href="https://github.com/rauchg/slackin">Slackin open source project</a>. We have two channels to start—general and help—and nearly 1,000 members to date!</p> +<p><strong><a href="https://bootstrap-slack.herokuapp.com/">Sign up here</a></strong> to join.</p> +<h2 id="wiredep-and-bower">wiredep and Bower</h2> +<p>Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the <code>main</code> field in <code>bower.json</code> works. Recently, <a href="https://github.com/bower/spec/pull/43">Bower updated their spec to address this and clarify how <code>main</code> should work</a>, and we <a href="https://github.com/twbs/bootstrap/pull/16359">updated our <code>bower.json</code> accordingly</a>. Unfortunately, <a href="https://github.com/twbs/bootstrap/issues/16663">wiredep broke as a result</a> if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is <a href="https://github.com/bower/spec/issues/47">working to further update their spec</a> to address this problem and better assist tools like wiredep.</p> +<p>In the meantime, a quick-and-dirty workaround to get wiredep to work with Bootstrap again is to add the following to your project’s <code>bower.json</code>:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="s2">"overrides"</span><span class="err">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"bootstrap"</span><span class="p">:</span> <span class="p">{</span> +</span></span><span class="line"><span class="cl"> <span class="nt">"main"</span><span class="p">:</span> <span class="p">[</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/js/bootstrap.js"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"dist/css/bootstrap.css"</span><span class="p">,</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"less/bootstrap.less"</span> +</span></span><span class="line"><span class="cl"> <span class="p">]</span> +</span></span><span class="line"><span class="cl"> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">}</span> +</span></span></code></pre></div><h2 id="download-bootstrap">Download Bootstrap</h2> +<p>Download the latest release—source code, compiled assets, and documentation—as a ZIP file directly from GitHub:</p> +<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.3.5.zip">Download Bootstrap 3.3.5</a></p> +<p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options. Also, remember <a href="https://www.npmjs.com/package/bootstrap">we’re available on npm</a>, too.</p> +<h2 id="bootstrap-cdn">Bootstrap CDN</h2> +<p>After reviewing the changelog, update your CDN links to point to the v3.3.5 files:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> +</span></span></code></pre></div> + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2015/03/16/bootstrap-3-3-4-released/" class="text-decoration-none"> Bootstrap 3.3.4 released </a> @@ -212,7 +287,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" src="https://github.com/cvrebert.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@cvrebert</span> </a> <span class="d-flex align-items-center ms-3" title="16 Mar 15 00:00 UTC"> @@ -225,7 +300,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/_dx0qWHL7dc?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/_dx0qWHL7dc?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -440,42 +515,6 @@ </ul> <p>We’d love to tell you more, but the dust still has to settle before we open our first pull request with a live alpha release. In addition to launching in v4 in the coming months, we’ll be maintaining v3 with small bugfixes for the first few months after the new version ships.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2014/10/13/rorschach/" class="text-decoration-none"> - Introducing Rorschach - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" - src="https://github.com/cvrebert.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@cvrebert</span> - </a> - <span class="d-flex align-items-center ms-3" title="13 Oct 14 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - October 13, 2014 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/Pav2f4b-1ZE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap receives tons of awesome pull requests every week. Many of them come from folks new to contributing to the project. As such, there are a few beginner mistakes we’ve noticed over time.</p> -<p>So, we made <a href="https://github.com/twbs/rorschach">Rorschach</a>, a bot that runs a few quick checks on every new pull request.</p> -<p>Rorschach automatically gives instant feedback on Bootstrap pull requests that suffer from one of <a href="https://github.com/twbs/rorschach#checks-performed">several simple mistakes</a>, thus decreasing turnaround time on fixing the pull request. The bot refers the contributor to <a href="https://github.com/twbs/rorschach/tree/master/docs">new documentation</a> we’ve written to explain each of the mistakes in detail, along with how to correct them, thus decreasing friction for contributors.</p> -<p>Previously, these mistakes were checked for manually, which meant there was often a delay before the mistake was noticed and that pull request reviewers had to manually explain the mistake to the contributor each time. With Rorschach, everyone should have a smoother experience working on Bootstrap.</p> -<p>Happy pull requesting!</p> - </div> </div> diff --git a/page/16/index.html b/page/16/index.html index e8e3d640..99083609 100644 --- a/page/16/index.html +++ b/page/16/index.html @@ -203,6 +203,42 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2014/10/13/rorschach/" class="text-decoration-none"> + Introducing Rorschach + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" + src="https://github.com/cvrebert.png?size=32" + alt="" width="32" height="32"> + <span>@cvrebert</span> + </a> + <span class="d-flex align-items-center ms-3" title="13 Oct 14 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + October 13, 2014 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/Pav2f4b-1ZE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap receives tons of awesome pull requests every week. Many of them come from folks new to contributing to the project. As such, there are a few beginner mistakes we’ve noticed over time.</p> +<p>So, we made <a href="https://github.com/twbs/rorschach">Rorschach</a>, a bot that runs a few quick checks on every new pull request.</p> +<p>Rorschach automatically gives instant feedback on Bootstrap pull requests that suffer from one of <a href="https://github.com/twbs/rorschach#checks-performed">several simple mistakes</a>, thus decreasing turnaround time on fixing the pull request. The bot refers the contributor to <a href="https://github.com/twbs/rorschach/tree/master/docs">new documentation</a> we’ve written to explain each of the mistakes in detail, along with how to correct them, thus decreasing friction for contributors.</p> +<p>Previously, these mistakes were checked for manually, which meant there was often a delay before the mistake was noticed and that pull request reviewers had to manually explain the mistake to the contributor each time. With Rorschach, everyone should have a smoother experience working on Bootstrap.</p> +<p>Happy pull requesting!</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2014/09/23/bootlint/" class="text-decoration-none"> Introducing Bootlint </a> @@ -212,7 +248,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/cvrebert" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/cvrebert.png?size=32, https://github.com/cvrebert.png?size=64 2x" src="https://github.com/cvrebert.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@cvrebert</span> </a> <span class="d-flex align-items-center ms-3" title="23 Sep 14 00:00 UTC"> @@ -225,7 +261,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/010KyIQjkTk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/010KyIQjkTk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -375,43 +411,6 @@ <p>Speaking of releases, you can expect v3.2.0 sometime later this month. Woohoo!</p> <p><3</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2014/04/02/ratchet-2-0-2-released/" class="text-decoration-none"> - Ratchet 2.0.2 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/connors" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/connors.png?size=32, https://github.com/connors.png?size=64 2x" - src="https://github.com/connors.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@connors</span> - </a> - <span class="d-flex align-items-center ms-3" title="02 Apr 14 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - April 02, 2014 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/9VAamPxlMG0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Today we’re shipping Ratchet 2.0.2. This patch release is full of bug fixes, refinements to our docs, and improvements to our build tools. Check out the detailed <a href="https://github.com/twbs/ratchet/releases/tag/v2.0.2">changelog</a> on the release page.</p> -<p>Download Ratchet right from GitHub or, go to the <a href="https://github.com/twbs/ratchet">project repository</a>.</p> -<p><a class="btn-link btn-link-ratchet" href="https://github.com/twbs/ratchet/archive/v2.0.2.zip">Download Ratchet 2.0.2</a></p> -<p>For a complete list of changes, see the <a href="https://github.com/twbs/ratchet/issues?milestone=4&state=closed">v2.0.2 milestone</a>.</p> -<h2 id="whats-next">What’s next</h2> -<p>We’re going to be working on the v2.1.0 release next. This will mark the first feature release for Ratchet 2. We’re really looking forward to developing more components that help you build awesome apps.</p> - </div> </div> diff --git a/page/17/index.html b/page/17/index.html index a670743e..00a709a7 100644 --- a/page/17/index.html +++ b/page/17/index.html @@ -203,6 +203,43 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2014/04/02/ratchet-2-0-2-released/" class="text-decoration-none"> + Ratchet 2.0.2 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/connors" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/connors.png?size=32, https://github.com/connors.png?size=64 2x" + src="https://github.com/connors.png?size=32" + alt="" width="32" height="32"> + <span>@connors</span> + </a> + <span class="d-flex align-items-center ms-3" title="02 Apr 14 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + April 02, 2014 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/9VAamPxlMG0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Today we’re shipping Ratchet 2.0.2. This patch release is full of bug fixes, refinements to our docs, and improvements to our build tools. Check out the detailed <a href="https://github.com/twbs/ratchet/releases/tag/v2.0.2">changelog</a> on the release page.</p> +<p>Download Ratchet right from GitHub or, go to the <a href="https://github.com/twbs/ratchet">project repository</a>.</p> +<p><a class="btn-link btn-link-ratchet" href="https://github.com/twbs/ratchet/archive/v2.0.2.zip">Download Ratchet 2.0.2</a></p> +<p>For a complete list of changes, see the <a href="https://github.com/twbs/ratchet/issues?milestone=4&state=closed">v2.0.2 milestone</a>.</p> +<h2 id="whats-next">What’s next</h2> +<p>We’re going to be working on the v2.1.0 release next. This will mark the first feature release for Ratchet 2. We’re really looking forward to developing more components that help you build awesome apps.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2014/03/05/ratchet-2-0-1-released/" class="text-decoration-none"> Ratchet 2.0.1 released </a> @@ -212,7 +249,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/connors" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/connors.png?size=32, https://github.com/connors.png?size=64 2x" src="https://github.com/connors.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@connors</span> </a> <span class="d-flex align-items-center ms-3" title="05 Mar 14 00:00 UTC"> @@ -225,7 +262,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/otCpCn0l4Wo?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/otCpCn0l4Wo?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -666,123 +703,6 @@ <li><a href="https://github.com/twbs/bootstrap/issues/12315">#12315</a>: Add npm caching based on <code>npm-shrinkwrap.canonical.json</code>.</li> </ul> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2013/12/05/bootstrap-3-0-3-released/" class="text-decoration-none"> - Bootstrap 3.0.3 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="05 Dec 13 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - December 05, 2013 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/xy4FXhkm6Nw?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Today we’re shipping another patch release, v3.0.3, to fix a few dozen bugs and improve our documentation.</p> -<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.0.3.zip">Download Bootstrap 3.0.3</a> or hit the <a href="https://github.com/twbs/bootstrap">GitHub repository</a></p> -<hr> -<h3 id="key-changes">Key changes</h3> -<p>There are a few dozen bug fixes and changes in this release, but we’ve called out the ones we think matter most:</p> -<ul> -<li>Padding of <code>.navbar-collapse</code> and alignment of <code>.navbar-right:last-child</code> elements has been reworked.</li> -<li>Added a <code>max-width: 100%;</code> to <code>.container</code>s.</li> -<li>Restored the twelfth column’s <code>float: left;</code> at all grid tiers.</li> -</ul> -<p>See the list below for more information on those changes and more.</p> -<h3 id="specific-bug-fixes-and-changes">Specific bug fixes and changes</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/issues/9927">#9927</a>: Update non-responsive example to prevent <code>.navbar-collapse</code> border from increasing height and increase specificity of nav selectors to keep dropdowns looking the same.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/10147">#10147</a>: Remove outline from carousel controls on focus.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/10353">#10353</a>: Tell Bower to ignore development and documentation files.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/10483">#10483</a>, <a href="https://github.com/twbs/bootstrap/issues/10357">#10357</a>: Make .container mixin-friendly by moving the width declarations within one class.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/10662">#10662</a>: Enable individually linked images within thumbnails.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/10744">#10744</a>: Use <code>border-style: solid;</code> on <code>.caret</code>s to undo a previous Firefox fix that appears to no longer work.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/10936">#10936</a>: Increase height of large inputs to fix Firefox inconsistencies by using <code>ceil()</code> instead of <code>floor()</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/10941">#10941</a>: Fix Glyphicons path for those importing <code>bootstrap.less</code> from another directory.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/10979">#10979</a>: Don’t use <code>.img-thumbnail</code> as a mixin for <code>.thumbnail</code> to avoid duplicate and unnecessary styles.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11217">#11217</a>: Fix vertical alignment of labels within buttons, just like badges in buttons.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11268">#11268</a>: Account for badges within buttons by matching background to text color and text color to background.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11277">#11277</a>: Drop the <code>abbr</code> element from the <code>.initialism</code> selector.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11299">#11299</a>: Support <code>.h1</code> in jumbotrons.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11351">#11351</a>: Correct grid class reset on input groups by using attribute selector, not an old class from v3 betas.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11357">#11357</a>: Vertically center <code>.btn-sm</code> and <code>.btn-xs</code> variations of <code>.navbar-btn</code>s in the navbar.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11376">#11376</a>: Don’t deselect radio buttons when double clicking.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11387">#11387</a>: Improve nesting on table classes to enable easier use of mixins.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11388">#11388</a>: Simplify contextual table styles mixin (also drops the <code>border</code> parameter since we longer apply that anyway).</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11390">#11390</a>: Add <code>max-width: 100%;</code> to containers within jumbotrons to avoid horizontal scrollbar.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11402">#11402</a>: Set <code>width: auto;</code> on <code>select.form-control</code> within <code>.form-inline</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11414">#11414</a>: Add <code>.small</code> support to blockquote citations.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11425">#11425</a>: Use <code>margin</code> instead of <code>padding</code> on <code>.modal-dialog</code> to click-thru to <code>.modal-backdrop</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11432">#11432</a>: Corrected color contrast to WCAG 2.0 AA for <code>@state-</code> variables (applies to forms and labels).</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11444">#11444</a>: Use <code>@navbar-padding-vertical</code> for nav links vertical padding.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11449">#11449</a>: Prefer Menlo over Monaco for monospaced fonts.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11468">#11468</a>: Prevent default gradient <code>background-image</code> on <code>.navbar-toggle</code> in Firefox for Android.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11476">#11476</a>: Remove unnecessary prefixed keyframe declarations for animated progress bars. Given our browser support requirements, we can drop the <code>-moz-</code> prefix as the last several versions don’t require it.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11477">#11477</a>: Use namespace events for dropdowns and carousel.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11493">#11493</a>: Ensure proper width of dropdown buttons within vertical button groups.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11499">#11499</a>: Switch from <code>overflow-y: auto;</code> to <code>overflow-y: visible;</code> to prevent vertical scrollbar in some navbar situations.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11502">#11502</a>: Add missing data namespace for dropdown plugin.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11513">#11513</a>: Float <code>navbar-text</code> elements only when screen width is above <code>@grid-float-breakpoint</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11515">#11515</a>: Reorder the headings with body text and text emphasis classes.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11516">#11516</a>: Invert dropdown divider border in navbars.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11530">#11530</a>: Reworked <code>padding</code> on <code>.navbar-collapse</code> and negative <code>margin</code> for right-aligned navbar content to ensure proper alignment on the right side.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11536">#11536</a>: Add support for button dropdowns within justified button groups.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11544">#11544</a>: Add <code>color: inherit;</code> to <code>.panel-title</code> to ensure proper text color when customizing <code>@headings-color</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11551">#11551</a>: Remove color from <code>outline</code> reset for improved outlines on focus.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11553">#11553</a>: Prevent double border on tables in panels without <code>thead</code> content.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11598">#11598</a>: Remove line breaks in minified CSS.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11599">#11599</a>: Explicitly call out font files in <code>bower.json</code> to avoid npm errors.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11610">#11610</a>: Add <code>@grid-float-breakpoint-max</code> to better link navbar behavior across viewports and improve customization when setting <code>@grid-float-breakpoint</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11614">#11614</a>: Account for responsive tables within panels.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11617">#11617</a>: Include jspm package configuration in <code>package.json</code>.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11623">#11623</a>: Reset <code>position</code> to <code>static</code> for grid columns within tables to prevent borders from hiding in IE9, IE10, and Firefox.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11648">#11648</a>: Restore twelfth column’s float.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11658">#11658</a>: Increase <code>min-height</code> of <code>.radio</code>/<code>.checkbox</code> for horizontal forms to ensure alignment of content below.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11693">#11693</a>: Adds <code>.table</code> to responsive visibility mixin.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11694">#11694</a>: Remove unnecessary prefixes for gradient mixins given our stated browser support.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11712">#11712</a>: Better support for .table-responsive within .panel’s.</li> -<li>Removed browser default top margin from <code>dl</code>s. <a href="https://github.com/twbs/bootstrap/commit/841da88f3fc93740cca07b6e4581a333d77964f0">Commit</a></li> -</ul> -<h3 id="docs-changes">Docs changes</h3> -<p>Be sure to run <code>npm install</code> if you’re running <code>grunt</code> locally—we’ve updated our build process and have some new dependencies.</p> -<ul> -<li><a href="https://github.com/twbs/bootstrap/issues/9898">#9898</a>: Improve scrollspy and affix plugin documentation.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/10716">#10716</a>: Update “What’s included” docs section with info on full source code download directory structure.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11303">#11303</a>: Add link to the docs site in compiled assets, and remove personal usernames.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11330">#11330</a>: Add <code>overflow-x: hidden;</code> to <code>body</code> in offcanvas example to prevent horizontal scrolling.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11369">#11369</a>: Speed up jQuery and Twitter widgets on docs pages by using Google’s CDN for jQuery and the async snippet from the Twitter dev site for the widgets.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11385">#11385</a>: Warn about Webkit bug for justified nav example.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11409">#11409</a>: Add release checklist to contributing guidelines.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11412">#11412</a>: Add <code>word-wrap: break-word;</code> to docs Glyphicons class names to ensure proper wrapping in IE10-11.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11434">#11434</a>: Mention form validation class changes in migration docs.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11534">#11534</a>: Document that modal <code>show()</code> and <code>hide()</code> return before animation finishes.</li> -<li><a href="https://github.com/twbs/bootstrap/issues/11634">#11634</a>: Add warning to docs to not combine icon classes with other elements.</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11671">#11671</a>: Updated third party asset libraries (for Customizer and Holder, our thumbnail utility).</li> -<li><a href="https://github.com/twbs/bootstrap/pull/11701">#11701</a>: Switch to Sauce Labs for our cross-browser JS unit testing needs.</li> -<li>Removed mention of Chrome from Webkit rendering bug for justified nav. <a href="https://github.com/twbs/bootstrap/commit/4cbc8d49b10f707029019aaa5eba50e56390a3c5">Commit</a></li> -</ul> -<p>As always, get the details from the <a href="https://github.com/twbs/bootstrap/issues?milestone=24&q=is%3Aclosed">v3.0.3 milestone</a>.</p> -<h2 id="up-next">Up next</h2> -<p>Next up is v3.1.0, the first new feature release for Bootstrap 3. Stay tuned for more information on what’ll be in that release as we continue to plan out subsequent releases.</p> - </div> </div> diff --git a/page/18/index.html b/page/18/index.html index c4e9d883..d4175fc1 100644 --- a/page/18/index.html +++ b/page/18/index.html @@ -203,6 +203,123 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2013/12/05/bootstrap-3-0-3-released/" class="text-decoration-none"> + Bootstrap 3.0.3 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="05 Dec 13 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + December 05, 2013 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/xy4FXhkm6Nw?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Today we’re shipping another patch release, v3.0.3, to fix a few dozen bugs and improve our documentation.</p> +<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.0.3.zip">Download Bootstrap 3.0.3</a> or hit the <a href="https://github.com/twbs/bootstrap">GitHub repository</a></p> +<hr> +<h3 id="key-changes">Key changes</h3> +<p>There are a few dozen bug fixes and changes in this release, but we’ve called out the ones we think matter most:</p> +<ul> +<li>Padding of <code>.navbar-collapse</code> and alignment of <code>.navbar-right:last-child</code> elements has been reworked.</li> +<li>Added a <code>max-width: 100%;</code> to <code>.container</code>s.</li> +<li>Restored the twelfth column’s <code>float: left;</code> at all grid tiers.</li> +</ul> +<p>See the list below for more information on those changes and more.</p> +<h3 id="specific-bug-fixes-and-changes">Specific bug fixes and changes</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/issues/9927">#9927</a>: Update non-responsive example to prevent <code>.navbar-collapse</code> border from increasing height and increase specificity of nav selectors to keep dropdowns looking the same.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/10147">#10147</a>: Remove outline from carousel controls on focus.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/10353">#10353</a>: Tell Bower to ignore development and documentation files.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/10483">#10483</a>, <a href="https://github.com/twbs/bootstrap/issues/10357">#10357</a>: Make .container mixin-friendly by moving the width declarations within one class.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/10662">#10662</a>: Enable individually linked images within thumbnails.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/10744">#10744</a>: Use <code>border-style: solid;</code> on <code>.caret</code>s to undo a previous Firefox fix that appears to no longer work.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/10936">#10936</a>: Increase height of large inputs to fix Firefox inconsistencies by using <code>ceil()</code> instead of <code>floor()</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/10941">#10941</a>: Fix Glyphicons path for those importing <code>bootstrap.less</code> from another directory.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/10979">#10979</a>: Don’t use <code>.img-thumbnail</code> as a mixin for <code>.thumbnail</code> to avoid duplicate and unnecessary styles.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11217">#11217</a>: Fix vertical alignment of labels within buttons, just like badges in buttons.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11268">#11268</a>: Account for badges within buttons by matching background to text color and text color to background.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11277">#11277</a>: Drop the <code>abbr</code> element from the <code>.initialism</code> selector.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11299">#11299</a>: Support <code>.h1</code> in jumbotrons.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11351">#11351</a>: Correct grid class reset on input groups by using attribute selector, not an old class from v3 betas.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11357">#11357</a>: Vertically center <code>.btn-sm</code> and <code>.btn-xs</code> variations of <code>.navbar-btn</code>s in the navbar.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11376">#11376</a>: Don’t deselect radio buttons when double clicking.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11387">#11387</a>: Improve nesting on table classes to enable easier use of mixins.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11388">#11388</a>: Simplify contextual table styles mixin (also drops the <code>border</code> parameter since we longer apply that anyway).</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11390">#11390</a>: Add <code>max-width: 100%;</code> to containers within jumbotrons to avoid horizontal scrollbar.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11402">#11402</a>: Set <code>width: auto;</code> on <code>select.form-control</code> within <code>.form-inline</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11414">#11414</a>: Add <code>.small</code> support to blockquote citations.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11425">#11425</a>: Use <code>margin</code> instead of <code>padding</code> on <code>.modal-dialog</code> to click-thru to <code>.modal-backdrop</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11432">#11432</a>: Corrected color contrast to WCAG 2.0 AA for <code>@state-</code> variables (applies to forms and labels).</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11444">#11444</a>: Use <code>@navbar-padding-vertical</code> for nav links vertical padding.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11449">#11449</a>: Prefer Menlo over Monaco for monospaced fonts.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11468">#11468</a>: Prevent default gradient <code>background-image</code> on <code>.navbar-toggle</code> in Firefox for Android.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11476">#11476</a>: Remove unnecessary prefixed keyframe declarations for animated progress bars. Given our browser support requirements, we can drop the <code>-moz-</code> prefix as the last several versions don’t require it.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11477">#11477</a>: Use namespace events for dropdowns and carousel.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11493">#11493</a>: Ensure proper width of dropdown buttons within vertical button groups.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11499">#11499</a>: Switch from <code>overflow-y: auto;</code> to <code>overflow-y: visible;</code> to prevent vertical scrollbar in some navbar situations.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11502">#11502</a>: Add missing data namespace for dropdown plugin.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11513">#11513</a>: Float <code>navbar-text</code> elements only when screen width is above <code>@grid-float-breakpoint</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11515">#11515</a>: Reorder the headings with body text and text emphasis classes.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11516">#11516</a>: Invert dropdown divider border in navbars.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11530">#11530</a>: Reworked <code>padding</code> on <code>.navbar-collapse</code> and negative <code>margin</code> for right-aligned navbar content to ensure proper alignment on the right side.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11536">#11536</a>: Add support for button dropdowns within justified button groups.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11544">#11544</a>: Add <code>color: inherit;</code> to <code>.panel-title</code> to ensure proper text color when customizing <code>@headings-color</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11551">#11551</a>: Remove color from <code>outline</code> reset for improved outlines on focus.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11553">#11553</a>: Prevent double border on tables in panels without <code>thead</code> content.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11598">#11598</a>: Remove line breaks in minified CSS.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11599">#11599</a>: Explicitly call out font files in <code>bower.json</code> to avoid npm errors.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11610">#11610</a>: Add <code>@grid-float-breakpoint-max</code> to better link navbar behavior across viewports and improve customization when setting <code>@grid-float-breakpoint</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11614">#11614</a>: Account for responsive tables within panels.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11617">#11617</a>: Include jspm package configuration in <code>package.json</code>.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11623">#11623</a>: Reset <code>position</code> to <code>static</code> for grid columns within tables to prevent borders from hiding in IE9, IE10, and Firefox.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11648">#11648</a>: Restore twelfth column’s float.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11658">#11658</a>: Increase <code>min-height</code> of <code>.radio</code>/<code>.checkbox</code> for horizontal forms to ensure alignment of content below.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11693">#11693</a>: Adds <code>.table</code> to responsive visibility mixin.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11694">#11694</a>: Remove unnecessary prefixes for gradient mixins given our stated browser support.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11712">#11712</a>: Better support for .table-responsive within .panel’s.</li> +<li>Removed browser default top margin from <code>dl</code>s. <a href="https://github.com/twbs/bootstrap/commit/841da88f3fc93740cca07b6e4581a333d77964f0">Commit</a></li> +</ul> +<h3 id="docs-changes">Docs changes</h3> +<p>Be sure to run <code>npm install</code> if you’re running <code>grunt</code> locally—we’ve updated our build process and have some new dependencies.</p> +<ul> +<li><a href="https://github.com/twbs/bootstrap/issues/9898">#9898</a>: Improve scrollspy and affix plugin documentation.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/10716">#10716</a>: Update “What’s included” docs section with info on full source code download directory structure.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11303">#11303</a>: Add link to the docs site in compiled assets, and remove personal usernames.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11330">#11330</a>: Add <code>overflow-x: hidden;</code> to <code>body</code> in offcanvas example to prevent horizontal scrolling.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11369">#11369</a>: Speed up jQuery and Twitter widgets on docs pages by using Google’s CDN for jQuery and the async snippet from the Twitter dev site for the widgets.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11385">#11385</a>: Warn about Webkit bug for justified nav example.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11409">#11409</a>: Add release checklist to contributing guidelines.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11412">#11412</a>: Add <code>word-wrap: break-word;</code> to docs Glyphicons class names to ensure proper wrapping in IE10-11.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11434">#11434</a>: Mention form validation class changes in migration docs.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11534">#11534</a>: Document that modal <code>show()</code> and <code>hide()</code> return before animation finishes.</li> +<li><a href="https://github.com/twbs/bootstrap/issues/11634">#11634</a>: Add warning to docs to not combine icon classes with other elements.</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11671">#11671</a>: Updated third party asset libraries (for Customizer and Holder, our thumbnail utility).</li> +<li><a href="https://github.com/twbs/bootstrap/pull/11701">#11701</a>: Switch to Sauce Labs for our cross-browser JS unit testing needs.</li> +<li>Removed mention of Chrome from Webkit rendering bug for justified nav. <a href="https://github.com/twbs/bootstrap/commit/4cbc8d49b10f707029019aaa5eba50e56390a3c5">Commit</a></li> +</ul> +<p>As always, get the details from the <a href="https://github.com/twbs/bootstrap/issues?milestone=24&q=is%3Aclosed">v3.0.3 milestone</a>.</p> +<h2 id="up-next">Up next</h2> +<p>Next up is v3.1.0, the first new feature release for Bootstrap 3. Stay tuned for more information on what’ll be in that release as we continue to plan out subsequent releases.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2013/11/06/bootstrap-3-0-2-released/" class="text-decoration-none"> Bootstrap 3.0.2 released </a> @@ -212,7 +329,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="06 Nov 13 00:00 UTC"> @@ -225,7 +342,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/oMf_TdL0l64?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/oMf_TdL0l64?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -668,48 +785,6 @@ <p><a href="https://getbootstrap.com/">Head on over to the docs</a> to download and explore the new hotness in RC2.</p> <p><3</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2013/07/27/bootstrap-3-rc1/" class="text-decoration-none"> - Bootstrap 3 RC1 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="27 Jul 13 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - July 27, 2013 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/uB1D9wWxd2w?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Today we’re releasing the first of at least two release candidates for Bootstrap 3, and along with it a slew of updates to the project and community. Buckle up.</p> -<h2 id="new-organization">New organization</h2> -<p>We’ve mentioned it a few times in previous updates, but today it’s <em>Facebook Official</em>: Bootstrap has moved to <a href="https://github.com/twbs/bootstrap">@twbs/bootstrap</a>. Watchers, stars, and the like are all maintained in the move, as is all Git history. New digs, same code.</p> -<h2 id="docs-for-v3-and-v232">Docs for v3 and v2.3.2</h2> -<p>With today’s release we’re pushing forward 100% on Bootstrap 3, meaning when you head to <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> you’ll see the v3 RC1 documentation. Our intention is to make BS3’s testing and development as widespread as possible so we get the best final release possible.</p> -<p><strong>Head on over to <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> to check it out.</strong> If you’re running into any broken links on the downloads, give it a bit for the DNS to sort itself out.</p> -<p>We’re fully aware everyone cannot simply jump right into BS3 yet, so we’ve kept the docs for 2.3.2 around for easy access. You’ll find a prominent link to the old docs in all of BS3’s documentation. If you’re in need, head over to <a href="https://getbootstrap.com/2.3.2/">https://getbootstrap.com/2.3.2/</a>.</p> -<h2 id="whats-changed">What’s changed!?</h2> -<p>With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, <em>everything</em> has changed. We’ve added features, removed features, and cleaned up a lot more. The <a href="https://github.com/twbs/bootstrap/pull/6342">v3 pull request</a> on GitHub has all the details you’ll need for a complete list of changes and some helpful migration tips.</p> -<h2 id="onward-to-rc2">Onward to RC2</h2> -<p>Bootstrap 3 RC1 is just the start, and we need your help to get to RC2. Download it and give it a go, and most importantly, tell us what you find. If something new is all funky or you found a bug, let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening a new issue</a>.</p> - </div> </div> diff --git a/page/19/index.html b/page/19/index.html index 44a17405..5c7533ea 100644 --- a/page/19/index.html +++ b/page/19/index.html @@ -203,6 +203,48 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2013/07/27/bootstrap-3-rc1/" class="text-decoration-none"> + Bootstrap 3 RC1 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="27 Jul 13 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + July 27, 2013 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/uB1D9wWxd2w?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Today we’re releasing the first of at least two release candidates for Bootstrap 3, and along with it a slew of updates to the project and community. Buckle up.</p> +<h2 id="new-organization">New organization</h2> +<p>We’ve mentioned it a few times in previous updates, but today it’s <em>Facebook Official</em>: Bootstrap has moved to <a href="https://github.com/twbs/bootstrap">@twbs/bootstrap</a>. Watchers, stars, and the like are all maintained in the move, as is all Git history. New digs, same code.</p> +<h2 id="docs-for-v3-and-v232">Docs for v3 and v2.3.2</h2> +<p>With today’s release we’re pushing forward 100% on Bootstrap 3, meaning when you head to <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> you’ll see the v3 RC1 documentation. Our intention is to make BS3’s testing and development as widespread as possible so we get the best final release possible.</p> +<p><strong>Head on over to <a href="https://getbootstrap.com/">https://getbootstrap.com/</a> to check it out.</strong> If you’re running into any broken links on the downloads, give it a bit for the DNS to sort itself out.</p> +<p>We’re fully aware everyone cannot simply jump right into BS3 yet, so we’ve kept the docs for 2.3.2 around for easy access. You’ll find a prominent link to the old docs in all of BS3’s documentation. If you’re in need, head over to <a href="https://getbootstrap.com/2.3.2/">https://getbootstrap.com/2.3.2/</a>.</p> +<h2 id="whats-changed">What’s changed!?</h2> +<p>With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, <em>everything</em> has changed. We’ve added features, removed features, and cleaned up a lot more. The <a href="https://github.com/twbs/bootstrap/pull/6342">v3 pull request</a> on GitHub has all the details you’ll need for a complete list of changes and some helpful migration tips.</p> +<h2 id="onward-to-rc2">Onward to RC2</h2> +<p>Bootstrap 3 RC1 is just the start, and we need your help to get to RC2. Download it and give it a go, and most importantly, tell us what you find. If something new is all funky or you found a bug, let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening a new issue</a>.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2013/07/18/ante-up/" class="text-decoration-none"> Ante up. </a> @@ -212,7 +254,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="18 Jul 13 00:00 UTC"> @@ -225,7 +267,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/JzGmx7qbPzk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/JzGmx7qbPzk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -338,89 +380,6 @@ <p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.3.1.zip">Download Bootstrap 2.3.1</a> <span class="muted">(latest master ZIP)</span></p> <p><strong>Side note:</strong> Aside from the fixes in this release, future bugs will only be addressed in 3.0, or punted entirely, as appropriate. This release just fixes a few things left broken that we didn’t feel comfortable ignoring for the next several weeks.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2013/02/07/bootstrap-2-3-released/" class="text-decoration-none"> - Bootstrap 2.3 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="07 Feb 13 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - February 07, 2013 - </span> -</div> - - - - - <p>It has been far too long, friends. Nearly three months has gone by since we pushed out a new version of Bootstrap, but fret not, for that void comes to a most excellent halt tonight. After numerous delays, including a bout with the flu, we’re happy to announce the release of <a href="https://getbootstrap.com/">Bootstrap 2.3</a>.</p> -<h2 id="oh-shit-what">Oh shit what</h2> -<p>Bootstrap 2.3 includes some new features, as well as the standard bunch of bug fixes and docs improvements. Here are the highlights:</p> -<ul> -<li><strong>Repository changes:</strong> -<ul> -<li><strong>Local instead of global dependencies</strong> for our makefile and install process. Now getting started is way easier—just run <code>npm install</code>.</li> -<li>Upgraded to jQuery 1.9. No changes were needed, but we did upgrade the included jQuery file to the latest release.</li> -<li>Moved changelog to be within the repo instead of as a wiki page.</li> -</ul> -</li> -<li><strong>New and improved features:</strong> -<ul> -<li><strong>Added carousel indicators!</strong> Add the HTML and it automagically works.</li> -<li><strong>Added <code>container</code> option to tooltips.</strong> The default option is still <code>insertAfter</code>, but now you may specify where to insert tooltips (and by extension, popovers) with the optional container parameter.</li> -<li>Improved popovers now utilize <code>max-width</code> instead of <code>width</code>, have been widened from 240px to 280px, and will automatically hide the title if one has not been set via CSS <code>:empty</code> selector.</li> -<li>Improved tooltip alignment on edges with <a href="https://github.com/twbs/bootstrap/pull/6713">#6713</a>.</li> -<li><strong>Improved accessibility for links in all components.</strong> After merging <a href="https://github.com/twbs/bootstrap/pull/6441">#6441</a>, link hover states now apply to the <code>:focus</code> state as well. This goes for basic <code><a></code> tags, as well as buttons, navs, dropdowns, and more.</li> -<li>Added print utility classes to show and hide content between <code>screen</code> and <code>print</code> via CSS.</li> -<li>Updated input groups to make them behave more like default form controls. Added <code>display: inline-block;</code>, increased <code>margin-bottom</code>, and added <code>vertical-align: middle;</code> to match <code><input></code> styles.</li> -<li>Added <code>.horizontal-three-colors()</code> gradient mixin (with example in the CSS tests file).</li> -<li>Added <code>.text-left</code>, <code>.text-center</code>, and <code>.text-right</code> utility classes for easy typographic alignment.</li> -<li>Added <code>@ms-viewport</code> so IE10 can use responsive CSS when in split-screen mode.</li> -</ul> -</li> -<li><strong>Docs changes:</strong> -<ul> -<li>Added <a href="/assets/img/2013/02/justified-nav.png">new justified navigation example</a>.</li> -<li>Added sticky footer with fixed navbar example.</li> -</ul> -</li> -</ul> -<p>As always, you can see a more complete list of changes by viewing the <a href="https://github.com/twbs/bootstrap/issues?milestone=18&q=is%3Aclosed">2.3.0 milestone</a> or <a href="https://github.com/twbs/bootstrap/pull/6346">2.3.0 pull request</a> on GitHub. Most of the issues not mentioned above are minor CSS tweaks and documentation typos.</p> -<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.3.0.zip">Download Bootstrap 2.3.0</a> <span class="muted">(latest master ZIP)</span></p> -<h2 id="a-note-on-tooltips">A note on tooltips</h2> -<p>When we <a href="/2012/12/08/bootstrap-2-2-2-released/">released 2.2.2</a>, we changed the insertion strategy for tooltips and popovers. Instead of appending to the <code><body></code> by default, they used <code>insertAfter</code>. This change fixed number <code>z-index</code> issues and ultimately makes controlling and styling tooltips much easier for folks.</p> -<p>Unfortunately, this also resulted in a few bugs, namely breaking input groups by interfering with <a href="https://css-tricks.com/child-and-sibling-selectors/">adjacent CSS selectors</a>. Instead of reverting the insertion method, <strong>we’ve added a new <code>container</code> option</strong>. If you run into a situation where <code>insertAfter</code> doesn’t work for you, go ahead and set that option to whatever element works best for you.</p> -<h2 id="bootstrap-3-update">Bootstrap 3 update</h2> -<p>As we’ve previously mentioned, v2.3 is our last planned release before moving onto v3 fulltime (pending any catastrophic fuckups). For the latest, <a href="https://github.com/twbs/bootstrap/pull/6342">follow the Bootstrap 3 pull request</a>. <strong>Otherwise, here’s the lowdown:</strong></p> -<ul> -<li>Bootstrap 3 will be mobile first.</li> -<li>No more separate responsive CSS file—all in one now, baby.</li> -<li>Dropping support for IE7 and Firefox 3.x.</li> -<li>Grids have been overhauled—now simpler and fluid by default.</li> -<li>Modals are all responsive and shit now.</li> -<li>Dropping submenu support.</li> -<li>Carousel has been redesigned.</li> -<li>Renamed all of the variables to use dashes instead of camelCase.</li> -<li>Dropped image icons in favor of icon font.</li> -<li>JavaScript events are going to be namespaced.</li> -<li>Docs are getting a bit of a reorganization—Scaffolding and Base CSS have been merged into a single page, CSS.</li> -<li>Added a new gallery page to showcase more awesome Bootstrap implementations.</li> -<li>And a whole mess of other changes.</li> -</ul> -<p>And that’s just some of the highlights. Again, <a href="https://github.com/twbs/bootstrap/pull/6342">peep the pull request</a> for the most up to date changes as we continue to chip away at this bad boy. Feel free to comment on that, or hit us up on Twitter, for feedback of any kind.</p> - </div> </div> diff --git a/page/2/index.html b/page/2/index.html index 43a6abf6..b46ccac9 100644 --- a/page/2/index.html +++ b/page/2/index.html @@ -203,6 +203,62 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2022/07/13/bootstrap-icons-1-9-0/" class="text-decoration-none"> + Bootstrap Icons v1.9.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="13 Jul 22 00:01 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + July 13, 2022 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/Z6_ZNW1DACE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.9.0</a> is here with over 140 new and updated icons, including some longstanding requests for new brands, transportation options, numbers and letters, and so much more. With this release, we’re now at <strong>over 1,800 icons</strong>!</p> +<h2 id="140-new-icons">140+ new icons</h2> +<p>Here’s a quick look at all the new icons in v1.9.0:</p> +<p><img src="/assets/img/2022/07/bootstrap-icons-v190.png" class="d-block img-fluid mb-2 rounded border" alt="New love icons in v1.9.0" loading="lazy" width="1544" height="1544"> +</p> +<ul> +<li>Tons of new brand icons including popular browsers, Ubuntu, Google Play, Android, Dropbox, and many more.</li> +<li>New transportation icons including cars, trains, planes, fuel, and common road signs.</li> +<li>New number and letter icons for 1-9, R, C, CC, H, and P (for use cases like registered trademark, copyright, Creative Commons, hospital or helicopter, and parking).</li> +<li>New medical icons for prescriptions, pills, and viruses.</li> +<li>New keyboard icons for tab and escape.</li> +<li>New Universal Access cions.</li> +<li>Redrawn cup icon, now with a steam variant for hot beverages.</li> +<li>Fire, finally!</li> +</ul> +<p>There are a handful more in there as well, so have a look and put them to use in your next update! In addition, we’ve updated our docs to include mention of Composer installs.</p> +<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> +<h2 id="install">Install</h2> +<p>To get started, install or update via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>Or Composer:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.9.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.9.0/bootstrap-icons-1.9.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2022/05/16/using-bootstrap-css-vars/" class="text-decoration-none"> Using CSS variables in Bootstrap </a> @@ -212,7 +268,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="16 May 22 00:00 UTC"> @@ -676,51 +732,6 @@ <h2 id="figma">Figma</h2> <p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2021/11/01/bootstrap-icons-1-7-0/" class="text-decoration-none"> - Bootstrap Icons v1.7.0 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="01 Nov 21 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - November 01, 2021 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/CqZgd6-xQl8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.7.0</a> is here with 120 new and updated icons, taking us over 1,500 total icons for the project! It’s the largest update since the initial release, so keep reading to see what’s new.</p> -<h2 id="120-new-icons">120 new icons</h2> -<p>This update was a lot of fun for me—drawing all these tiny computer parts most of all! There are dozens of new computer-related icons for parts, ports, and peripheral devices. There are also several new brand icons, including Meta, and some other fun icons like a new robot head and a boombox.</p> -<p><img src="/assets/img/2021/11/icons-v170.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.7.0" loading="lazy" width="1620" height="720"> -</p> -<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> -<h2 id="install">Install</h2> -<p>To get started, install or update via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons -</span></span></code></pre></div><p>Or Composer:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons -</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> -<h2 id="figma">Figma</h2> -<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> - </div> </div> diff --git a/page/20/index.html b/page/20/index.html index 4f293848..8bae3539 100644 --- a/page/20/index.html +++ b/page/20/index.html @@ -203,6 +203,89 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2013/02/07/bootstrap-2-3-released/" class="text-decoration-none"> + Bootstrap 2.3 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="07 Feb 13 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + February 07, 2013 + </span> +</div> + + + + + <p>It has been far too long, friends. Nearly three months has gone by since we pushed out a new version of Bootstrap, but fret not, for that void comes to a most excellent halt tonight. After numerous delays, including a bout with the flu, we’re happy to announce the release of <a href="https://getbootstrap.com/">Bootstrap 2.3</a>.</p> +<h2 id="oh-shit-what">Oh shit what</h2> +<p>Bootstrap 2.3 includes some new features, as well as the standard bunch of bug fixes and docs improvements. Here are the highlights:</p> +<ul> +<li><strong>Repository changes:</strong> +<ul> +<li><strong>Local instead of global dependencies</strong> for our makefile and install process. Now getting started is way easier—just run <code>npm install</code>.</li> +<li>Upgraded to jQuery 1.9. No changes were needed, but we did upgrade the included jQuery file to the latest release.</li> +<li>Moved changelog to be within the repo instead of as a wiki page.</li> +</ul> +</li> +<li><strong>New and improved features:</strong> +<ul> +<li><strong>Added carousel indicators!</strong> Add the HTML and it automagically works.</li> +<li><strong>Added <code>container</code> option to tooltips.</strong> The default option is still <code>insertAfter</code>, but now you may specify where to insert tooltips (and by extension, popovers) with the optional container parameter.</li> +<li>Improved popovers now utilize <code>max-width</code> instead of <code>width</code>, have been widened from 240px to 280px, and will automatically hide the title if one has not been set via CSS <code>:empty</code> selector.</li> +<li>Improved tooltip alignment on edges with <a href="https://github.com/twbs/bootstrap/pull/6713">#6713</a>.</li> +<li><strong>Improved accessibility for links in all components.</strong> After merging <a href="https://github.com/twbs/bootstrap/pull/6441">#6441</a>, link hover states now apply to the <code>:focus</code> state as well. This goes for basic <code><a></code> tags, as well as buttons, navs, dropdowns, and more.</li> +<li>Added print utility classes to show and hide content between <code>screen</code> and <code>print</code> via CSS.</li> +<li>Updated input groups to make them behave more like default form controls. Added <code>display: inline-block;</code>, increased <code>margin-bottom</code>, and added <code>vertical-align: middle;</code> to match <code><input></code> styles.</li> +<li>Added <code>.horizontal-three-colors()</code> gradient mixin (with example in the CSS tests file).</li> +<li>Added <code>.text-left</code>, <code>.text-center</code>, and <code>.text-right</code> utility classes for easy typographic alignment.</li> +<li>Added <code>@ms-viewport</code> so IE10 can use responsive CSS when in split-screen mode.</li> +</ul> +</li> +<li><strong>Docs changes:</strong> +<ul> +<li>Added <a href="/assets/img/2013/02/justified-nav.png">new justified navigation example</a>.</li> +<li>Added sticky footer with fixed navbar example.</li> +</ul> +</li> +</ul> +<p>As always, you can see a more complete list of changes by viewing the <a href="https://github.com/twbs/bootstrap/issues?milestone=18&q=is%3Aclosed">2.3.0 milestone</a> or <a href="https://github.com/twbs/bootstrap/pull/6346">2.3.0 pull request</a> on GitHub. Most of the issues not mentioned above are minor CSS tweaks and documentation typos.</p> +<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.3.0.zip">Download Bootstrap 2.3.0</a> <span class="muted">(latest master ZIP)</span></p> +<h2 id="a-note-on-tooltips">A note on tooltips</h2> +<p>When we <a href="/2012/12/08/bootstrap-2-2-2-released/">released 2.2.2</a>, we changed the insertion strategy for tooltips and popovers. Instead of appending to the <code><body></code> by default, they used <code>insertAfter</code>. This change fixed number <code>z-index</code> issues and ultimately makes controlling and styling tooltips much easier for folks.</p> +<p>Unfortunately, this also resulted in a few bugs, namely breaking input groups by interfering with <a href="https://css-tricks.com/child-and-sibling-selectors/">adjacent CSS selectors</a>. Instead of reverting the insertion method, <strong>we’ve added a new <code>container</code> option</strong>. If you run into a situation where <code>insertAfter</code> doesn’t work for you, go ahead and set that option to whatever element works best for you.</p> +<h2 id="bootstrap-3-update">Bootstrap 3 update</h2> +<p>As we’ve previously mentioned, v2.3 is our last planned release before moving onto v3 fulltime (pending any catastrophic fuckups). For the latest, <a href="https://github.com/twbs/bootstrap/pull/6342">follow the Bootstrap 3 pull request</a>. <strong>Otherwise, here’s the lowdown:</strong></p> +<ul> +<li>Bootstrap 3 will be mobile first.</li> +<li>No more separate responsive CSS file—all in one now, baby.</li> +<li>Dropping support for IE7 and Firefox 3.x.</li> +<li>Grids have been overhauled—now simpler and fluid by default.</li> +<li>Modals are all responsive and shit now.</li> +<li>Dropping submenu support.</li> +<li>Carousel has been redesigned.</li> +<li>Renamed all of the variables to use dashes instead of camelCase.</li> +<li>Dropped image icons in favor of icon font.</li> +<li>JavaScript events are going to be namespaced.</li> +<li>Docs are getting a bit of a reorganization—Scaffolding and Base CSS have been merged into a single page, CSS.</li> +<li>Added a new gallery page to showcase more awesome Bootstrap implementations.</li> +<li>And a whole mess of other changes.</li> +</ul> +<p>And that’s just some of the highlights. Again, <a href="https://github.com/twbs/bootstrap/pull/6342">peep the pull request</a> for the most up to date changes as we continue to chip away at this bad boy. Feel free to comment on that, or hit us up on Twitter, for feedback of any kind.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2012/12/10/bootstrap-3-plans/" class="text-decoration-none"> Bootstrap 3 plans </a> @@ -212,7 +295,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="10 Dec 12 00:00 UTC"> @@ -401,37 +484,6 @@ <p>There’s some good news though. For you nerds who live on the edge, I’ve been working on tons of BS3-esque changes in the <code>3.0.0-wip</code> branch on GitHub. If you really cannot wait for the Glyphicons font (and don’t mind using unsupported code), do check it out. I plan on accelerating work on it in the coming weeks. (Please don’t submit issues for it though, but rather email me or ping me on Twitter for questions.)</p> <p>Thanks for listening, and as always, <3<3<3.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2012/10/30/2-2-1-hotfix-released/" class="text-decoration-none"> - 2.2.1 hotfix released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="30 Oct 12 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - October 30, 2012 - </span> -</div> - - - - - <p>After the <a href="/2012/10/29/bootstrap-2-2-0-released/">2.2.0 release last night</a>, a few bugs were reported, but only one major one: <a href="https://twitter.com/getbootstrap/status/263327129905811459">malfunctioning carousels</a>. To address that, <a href="https://twitter.com/fat">@fat</a> just pushed out a 2.2.1 hotfix release that fixes the bug. Upgrading should be super simple given the scope of this release.</p> -<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.2.1.zip">Download Bootstrap 2.2.1</a> <span class="muted">(latest master ZIP)</span></p> -<p>Once more, apologies for any hiccups and happy Bootstrapping!</p> - </div> </div> diff --git a/page/21/index.html b/page/21/index.html index 418f85c9..758431a9 100644 --- a/page/21/index.html +++ b/page/21/index.html @@ -203,6 +203,37 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2012/10/30/2-2-1-hotfix-released/" class="text-decoration-none"> + 2.2.1 hotfix released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="30 Oct 12 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + October 30, 2012 + </span> +</div> + + + + + <p>After the <a href="/2012/10/29/bootstrap-2-2-0-released/">2.2.0 release last night</a>, a few bugs were reported, but only one major one: <a href="https://twitter.com/getbootstrap/status/263327129905811459">malfunctioning carousels</a>. To address that, <a href="https://twitter.com/fat">@fat</a> just pushed out a 2.2.1 hotfix release that fixes the bug. Upgrading should be super simple given the scope of this release.</p> +<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.2.1.zip">Download Bootstrap 2.2.1</a> <span class="muted">(latest master ZIP)</span></p> +<p>Once more, apologies for any hiccups and happy Bootstrapping!</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2012/10/29/bootstrap-2-2-0-released/" class="text-decoration-none"> Bootstrap 2.2.0 released </a> @@ -212,7 +243,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="29 Oct 12 00:00 UTC"> @@ -366,60 +397,6 @@ <p>It’s also in the <code><head></code> of the blog’s pages, so entering just the root URL should resolve fine for you in most RSS apps. Again, sorry for the oversight and please continue to let us know if we can do anything else to improve the blog.</p> <p>Thanks!</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2012/08/20/bootstrap-2-1-0-released/" class="text-decoration-none"> - Bootstrap 2.1.0 released - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="20 Aug 12 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - August 20, 2012 - </span> -</div> - - - - - <p>After a smaller 2.0.4 release, we’ve got another huge update that resolves tons of bugs, improves the flexibility and durability of our code, and introduces a few awesome new features. It’s a big release wrapped in a brand new set of docs and we couldn’t be more stoked to launch it.</p> -<h2 id="tldr">tl;dr</h2> -<p>New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more. <a href="https://getbootstrap.com/">Go get it.</a></p> -<h2 id="improved-documentation">Improved documentation</h2> -<p>In addition to sporting a fresh visual style, the content of our docs has been overhauled once again. Good-bye long-winded marketing copy and multiple columns, hello succinct and directive single-column documentation. We’ve got a new tagline, new layout and navigation, and (more) clearer examples.</p> -<h2 id="key-changes-and-new-features">Key changes and new features</h2> -<p>We had higher expectations for the number of new features in 2.1, but we toned it back to get this release out the door in a manageable form. We’ve still added some great new features and fixed tones of bugs, so here’s a brief overview of what’s new.</p> -<ul> -<li><strong>Submenu support on dropdowns.</strong> We avoided this for some time as we thought it would unnecessarily complicate things, but we’ve backtracked on that and opted to add them in. See the docs for more info.</li> -<li><strong>Affix JavaScript plugin.</strong> Make anything stick to the top of the viewport as you scroll with our newest plugin, built to power our new docs navigation.</li> -<li><strong>Block level buttons.</strong> Add <code>.btn-block</code> to a button to make it full-width.</li> -<li><strong>State classes on table rows.</strong> Better convey success, warning, and error messages in tables.</li> -<li><strong>Improved disabled states on navs and dropdowns.</strong> Where by “improve” we mean actually present—just add <code>.disabled</code> to the <code>li</code>.</li> -<li><strong>The navbar component is now white by default, with an optional class to darken it.</strong> In order to have two options for the navbar, light and dark, we needed to have better defaults. Having a lighter default navbar means fewer lines of code as we don’t need to override anything for the basic navbar functionality and the override it again to restore the default styles. Missing the black? Just add <code>.navbar-inverse</code> to get the dark gray navbar back.</li> -<li><strong>Improved prepended and appended inputs.</strong> No need to place the <code>input</code> and <code>.add-on</code> on the same line of code (sorry about that by the way). Break them up as you like and they’ll still stick together with some crafty <code>font-size</code> working.</li> -<li><strong>New base font-size and line-height.</strong> 13px/18px is out, 14px/20px is in. This also has changed the size, line-height, and margin of our heading elements, buttons, and more.</li> -<li><strong>Added variable for navbar collapse trigger point.</strong> Instead of a fixed pixel width of <code>980px</code> for triggering the collapsed navbar, we now use a variable so you can customize it for your projects.</li> -<li><strong>Fluid grid offsets.</strong> Thanks to our contributors, the fluid grid now has offset support to match our fixed (pixel) grid.</li> -<li><strong>Fluid grid system variables are no longer fixed percentages.</strong> Instead, they are calculated in LESS with <code>percentage()</code> based on the default, fixed-width grid variables. Math!</li> -<li><strong>Removed LESS docs page.</strong> We will no longer document variables and mixins in two places—rewriting that stuff was painful and took too much time. Instead, just checkout the .less files.</li> -</ul> -<h2 id="thanks-nerds">Thanks, nerds</h2> -<p>Once again, we couldn’t have done this without all you nerds out there supporting us with your contributions, bugfixes, and feature requests. You keep this project going strong and we thank you deeply for your support.</p> -<p><3</p> -<hr> -<p>For the full changelog, visit the <a href="https://github.com/twbs/bootstrap/wiki/Changelog">GitHub wiki page</a> and the <a href="https://github.com/twbs/bootstrap/issues?milestone=7&q=is%3Aclosed">2.1.0 milestone</a>. We’ve already begun slating things for 2.2, but currently have no estimates on when that will be released or what exactly will make it in. We also may do a 2.1.1, but again, no promises at this point. <a href="https://www.youtube.com/watch?v=1vaQ-Y6kLOM&t=4s">Live in the now!</a></p> - </div> </div> diff --git a/page/22/index.html b/page/22/index.html index 960f21a0..eff3cf40 100644 --- a/page/22/index.html +++ b/page/22/index.html @@ -203,6 +203,60 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2012/08/20/bootstrap-2-1-0-released/" class="text-decoration-none"> + Bootstrap 2.1.0 released + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="20 Aug 12 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + August 20, 2012 + </span> +</div> + + + + + <p>After a smaller 2.0.4 release, we’ve got another huge update that resolves tons of bugs, improves the flexibility and durability of our code, and introduces a few awesome new features. It’s a big release wrapped in a brand new set of docs and we couldn’t be more stoked to launch it.</p> +<h2 id="tldr">tl;dr</h2> +<p>New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more. <a href="https://getbootstrap.com/">Go get it.</a></p> +<h2 id="improved-documentation">Improved documentation</h2> +<p>In addition to sporting a fresh visual style, the content of our docs has been overhauled once again. Good-bye long-winded marketing copy and multiple columns, hello succinct and directive single-column documentation. We’ve got a new tagline, new layout and navigation, and (more) clearer examples.</p> +<h2 id="key-changes-and-new-features">Key changes and new features</h2> +<p>We had higher expectations for the number of new features in 2.1, but we toned it back to get this release out the door in a manageable form. We’ve still added some great new features and fixed tones of bugs, so here’s a brief overview of what’s new.</p> +<ul> +<li><strong>Submenu support on dropdowns.</strong> We avoided this for some time as we thought it would unnecessarily complicate things, but we’ve backtracked on that and opted to add them in. See the docs for more info.</li> +<li><strong>Affix JavaScript plugin.</strong> Make anything stick to the top of the viewport as you scroll with our newest plugin, built to power our new docs navigation.</li> +<li><strong>Block level buttons.</strong> Add <code>.btn-block</code> to a button to make it full-width.</li> +<li><strong>State classes on table rows.</strong> Better convey success, warning, and error messages in tables.</li> +<li><strong>Improved disabled states on navs and dropdowns.</strong> Where by “improve” we mean actually present—just add <code>.disabled</code> to the <code>li</code>.</li> +<li><strong>The navbar component is now white by default, with an optional class to darken it.</strong> In order to have two options for the navbar, light and dark, we needed to have better defaults. Having a lighter default navbar means fewer lines of code as we don’t need to override anything for the basic navbar functionality and the override it again to restore the default styles. Missing the black? Just add <code>.navbar-inverse</code> to get the dark gray navbar back.</li> +<li><strong>Improved prepended and appended inputs.</strong> No need to place the <code>input</code> and <code>.add-on</code> on the same line of code (sorry about that by the way). Break them up as you like and they’ll still stick together with some crafty <code>font-size</code> working.</li> +<li><strong>New base font-size and line-height.</strong> 13px/18px is out, 14px/20px is in. This also has changed the size, line-height, and margin of our heading elements, buttons, and more.</li> +<li><strong>Added variable for navbar collapse trigger point.</strong> Instead of a fixed pixel width of <code>980px</code> for triggering the collapsed navbar, we now use a variable so you can customize it for your projects.</li> +<li><strong>Fluid grid offsets.</strong> Thanks to our contributors, the fluid grid now has offset support to match our fixed (pixel) grid.</li> +<li><strong>Fluid grid system variables are no longer fixed percentages.</strong> Instead, they are calculated in LESS with <code>percentage()</code> based on the default, fixed-width grid variables. Math!</li> +<li><strong>Removed LESS docs page.</strong> We will no longer document variables and mixins in two places—rewriting that stuff was painful and took too much time. Instead, just checkout the .less files.</li> +</ul> +<h2 id="thanks-nerds">Thanks, nerds</h2> +<p>Once again, we couldn’t have done this without all you nerds out there supporting us with your contributions, bugfixes, and feature requests. You keep this project going strong and we thank you deeply for your support.</p> +<p><3</p> +<hr> +<p>For the full changelog, visit the <a href="https://github.com/twbs/bootstrap/wiki/Changelog">GitHub wiki page</a> and the <a href="https://github.com/twbs/bootstrap/issues?milestone=7&q=is%3Aclosed">2.1.0 milestone</a>. We’ve already begun slating things for 2.2, but currently have no estimates on when that will be released or what exactly will make it in. We also may do a 2.1.1, but again, no promises at this point. <a href="https://www.youtube.com/watch?v=1vaQ-Y6kLOM&t=4s">Live in the now!</a></p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2012/08/13/help-test-bootstrap-2-1/" class="text-decoration-none"> Help test Bootstrap 2.1 </a> @@ -212,7 +266,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="13 Aug 12 00:00 UTC"> @@ -371,44 +425,6 @@ <hr> <p>Questions? <a href="https://twitter.com/getbootstrap">Mention us on Twitter</a>.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2012/04/27/talking-about-bootstrap/" class="text-decoration-none"> - Talking about Bootstrap - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="27 Apr 12 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - April 27, 2012 - </span> -</div> - - - - - <p>There is a thread on the mailing list about <a href="https://groups.google.com/forum/#!topic/twitter-bootstrap/LL75NMBGdVA">how to describe Bootstrap</a> and instead of isolating our response to just one email, I’ll just blog about it. As it stands, some folks are unsure how to describe Bootstrap to those unfamiliar with it. So here it is, straight from the official horse’s mouth.</p> -<h2 id="name">Name</h2> -<p>Casually, it’s just Bootstrap. That’s noun and verb, for those wondering—Bootstrap the project and “to Bootstrap a project”, respectively. Formally, we call it Twitter Bootstrap, a change that came with v2.0.0. Previously we called it “Bootstrap, from Twitter” to emphasize the project over our employer, but it just became too verbose and awkward to say.</p> -<p>Related, the shorthand abbreviation we use is BS—not TB, TBS, or TwBs. I don’t know why, but this feels better than TB since that’s the name of an infectious disease and all that.</p> -<h2 id="description">Description</h2> -<p>We worked at this for a good bit before setting on our current tagline, “Simple and flexible HTML, CSS, and JavaScript for popular user interface components and interactions.” Previously, it was much more descriptive to the framework’s contents, and thus quite long and wordy. We wanted to convey the technical details properly heading into 2.0.0 (when we changed the tagline), but without the bulk. Instead, we focus on the roles Bootstrap can assist folks with: HTML, CSS, and JavaScript. Any other description is fine, but I wanted to share some insight into the official tagline just for context.</p> -<h2 id="framework">Framework</h2> -<p>Another focal point in the email thread was the question of referring to Bootstrap as a framework. That’s accurate enough for sure, but also somewhat limiting depending on how you want to use it. Holistically, Bootstrap certainly is a framework (or toolkit or whatever) for prototyping and building production ready stuff on the web. That said, on an individual component level, Bootstrap is a tool for performing common web development tasks faster and easier.</p> -<hr> -<p>So there you have it, a quick low-down on how we’re thinking and talking about Bootstrap. When it comes right down to it, Bootstrap is whatever you want to make of it, so dive in and see where it can help you out the most.</p> - </div> </div> diff --git a/page/23/index.html b/page/23/index.html index cc48c361..8e6a727a 100644 --- a/page/23/index.html +++ b/page/23/index.html @@ -203,6 +203,44 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2012/04/27/talking-about-bootstrap/" class="text-decoration-none"> + Talking about Bootstrap + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="27 Apr 12 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + April 27, 2012 + </span> +</div> + + + + + <p>There is a thread on the mailing list about <a href="https://groups.google.com/forum/#!topic/twitter-bootstrap/LL75NMBGdVA">how to describe Bootstrap</a> and instead of isolating our response to just one email, I’ll just blog about it. As it stands, some folks are unsure how to describe Bootstrap to those unfamiliar with it. So here it is, straight from the official horse’s mouth.</p> +<h2 id="name">Name</h2> +<p>Casually, it’s just Bootstrap. That’s noun and verb, for those wondering—Bootstrap the project and “to Bootstrap a project”, respectively. Formally, we call it Twitter Bootstrap, a change that came with v2.0.0. Previously we called it “Bootstrap, from Twitter” to emphasize the project over our employer, but it just became too verbose and awkward to say.</p> +<p>Related, the shorthand abbreviation we use is BS—not TB, TBS, or TwBs. I don’t know why, but this feels better than TB since that’s the name of an infectious disease and all that.</p> +<h2 id="description">Description</h2> +<p>We worked at this for a good bit before setting on our current tagline, “Simple and flexible HTML, CSS, and JavaScript for popular user interface components and interactions.” Previously, it was much more descriptive to the framework’s contents, and thus quite long and wordy. We wanted to convey the technical details properly heading into 2.0.0 (when we changed the tagline), but without the bulk. Instead, we focus on the roles Bootstrap can assist folks with: HTML, CSS, and JavaScript. Any other description is fine, but I wanted to share some insight into the official tagline just for context.</p> +<h2 id="framework">Framework</h2> +<p>Another focal point in the email thread was the question of referring to Bootstrap as a framework. That’s accurate enough for sure, but also somewhat limiting depending on how you want to use it. Holistically, Bootstrap certainly is a framework (or toolkit or whatever) for prototyping and building production ready stuff on the web. That said, on an individual component level, Bootstrap is a tool for performing common web development tasks faster and easier.</p> +<hr> +<p>So there you have it, a quick low-down on how we’re thinking and talking about Bootstrap. When it comes right down to it, Bootstrap is whatever you want to make of it, so dive in and see where it can help you out the most.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2012/04/24/bootstrap-2-0-3-released/" class="text-decoration-none"> Bootstrap 2.0.3 released </a> @@ -212,7 +250,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="24 Apr 12 00:00 UTC"> @@ -445,39 +483,6 @@ We’re hoping that this will both catch potentially unsafe syntax as well a <p>As part of our visit and talk, we’ll be <strong>releasing Bootstrap 2.0.3 on April 24</strong> from London, our first intercontinental release. It’s been a long time coming, and we know lots of you have been anxiously awaiting its arrival, but we want to do this release the best we can. In addition to the release itself, the rest of our talk will focus on the future of Bootstrap. We’re not exactly sure what that will be yet, but the <a href="https://github.com/twbs/bootstrap/issues?milestone=7&q=is%3Aopen">2.1 milestone on GitHub</a> might give away some of it.</p> <p>Stay tuned for more info and feel free to hit us up on Twitter for questions, opportunities to meet up, and more.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2012/03/30/25000/" class="text-decoration-none"> - 25,000 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="30 Mar 12 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - March 30, 2012 - </span> -</div> - - - - - <p>Earlier today <a href="https://getbootstrap.com/">Bootstrap</a> passed 25,000 watchers on GitHub. For the last few months it has been the most watched project and continues to grow at an alarming rate. In fact, I recall writing about <a href="https://markdotto.com/2011/10/28/floored/">8,700 watchers back in October</a>. Jacob and I are still both in awe of how this former internal pet project has grown into one of the most popular front-end frameworks on the Web.</p> -<p>We’ve still got a lot ahead of us for features, refinement, and more, but we wanted to take a moment once again to thank the community for making Bootstrap the success that it is today.</p> -<p>Thank you. <em>Really</em>, <strong>thank you.</strong></p> -<p>And a special thanks to the 119 contributors (not including Jacob or myself) who have committed code to Bootstrap. Without you guys, a lot of this wouldn’t be possible.</p> -<p>Here’s to the next 25,000!</p> - </div> </div> diff --git a/page/24/index.html b/page/24/index.html index 9620e853..13aa9cca 100644 --- a/page/24/index.html +++ b/page/24/index.html @@ -203,6 +203,39 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2012/03/30/25000/" class="text-decoration-none"> + 25,000 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="30 Mar 12 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + March 30, 2012 + </span> +</div> + + + + + <p>Earlier today <a href="https://getbootstrap.com/">Bootstrap</a> passed 25,000 watchers on GitHub. For the last few months it has been the most watched project and continues to grow at an alarming rate. In fact, I recall writing about <a href="https://markdotto.com/2011/10/28/floored/">8,700 watchers back in October</a>. Jacob and I are still both in awe of how this former internal pet project has grown into one of the most popular front-end frameworks on the Web.</p> +<p>We’ve still got a lot ahead of us for features, refinement, and more, but we wanted to take a moment once again to thank the community for making Bootstrap the success that it is today.</p> +<p>Thank you. <em>Really</em>, <strong>thank you.</strong></p> +<p>And a special thanks to the 119 contributors (not including Jacob or myself) who have committed code to Bootstrap. Without you guys, a lot of this wouldn’t be possible.</p> +<p>Here’s to the next 25,000!</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2012/03/22/combining-badges-less-and-labels-less-in-2-0-3/" class="text-decoration-none"> Combining badges.less and labels.less in 2.0.3 </a> @@ -212,7 +245,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="22 Mar 12 00:00 UTC"> diff --git a/page/3/index.html b/page/3/index.html index fa730f14..2c4ea879 100644 --- a/page/3/index.html +++ b/page/3/index.html @@ -203,6 +203,51 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2021/11/01/bootstrap-icons-1-7-0/" class="text-decoration-none"> + Bootstrap Icons v1.7.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="01 Nov 21 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + November 01, 2021 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/CqZgd6-xQl8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.7.0</a> is here with 120 new and updated icons, taking us over 1,500 total icons for the project! It’s the largest update since the initial release, so keep reading to see what’s new.</p> +<h2 id="120-new-icons">120 new icons</h2> +<p>This update was a lot of fun for me—drawing all these tiny computer parts most of all! There are dozens of new computer-related icons for parts, ports, and peripheral devices. There are also several new brand icons, including Meta, and some other fun icons like a new robot head and a boombox.</p> +<p><img src="/assets/img/2021/11/icons-v170.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.7.0" loading="lazy" width="1620" height="720"> +</p> +<p><em>Looking for more new icons? Head to the <a href="https://github.com/twbs/icons/issues">issue tracker</a> to check for open requests or submit a new one.</em></p> +<h2 id="install">Install</h2> +<p>To get started, install or update via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>Or Composer:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.7.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.7.0/bootstrap-icons-1.7.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2021/10/28/bootstrap-4.6.1/" class="text-decoration-none"> Bootstrap v4.6.1 </a> @@ -212,7 +257,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="28 Oct 21 21:30 UTC"> @@ -225,7 +270,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/wBl2QGAIx1s?rel=0&start=135" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/wBl2QGAIx1s?rel=0&start=135" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -455,78 +500,6 @@ <h2 id="support-the-team">Support the team</h2> <p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2021/08/19/ten/" class="text-decoration-none"> - Ten Years of Bootstrap - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="19 Aug 21 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - August 19, 2021 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/KQ6zr6kCPj8?rel=0&start=85" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p><a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter">Ten years ago today</a>, we shipped the <a href="https://getbootstrap.com/1.0.0/">first release of Bootstrap</a>. Releasing it on GitHub was my first real plunge into open source—what an introduction! Here we are a decade later with one of the most widely used open source projects and frontend toolkits on the web. Happy birthday, Bootstrap—what a ride!</p> -<p>While numbers certainly don’t tell the whole story, Bootstrap has reached some incredible milestones over the past decade. Here are some highlights:</p> -<ul> -<li><strong>Over 2.5 billion pageviews for our docs.</strong> That’s more than 685,000 a day.</li> -<li><strong>394,000,000 <a href="https://npm-stat.com/charts.html?package=bootstrap&from=2011-08-01&to=2021-08-18">npm downloads</a></strong> since 2015—over 131 million of which were in 2020 alone. That’s 180,000 a day over the last six years.</li> -<li><strong>50 million RubyGems downloads</strong></li> -<li><strong>57 million <a href="https://www.nuget.org/packages/bootstrap/">NuGet downloads</a></strong></li> -<li><strong>7.5 million <a href="https://packagist.org/packages/twbs/bootstrap/stats">Packagist installs</a></strong></li> -<li><strong>Used by over <a href="https://w3techs.com/technologies/details/js-bootstrap">22% of all websites</a></strong></li> -<li>Used by 2.7 million projects on GitHub</li> -<li>Over 21,100 commits on GitHub with nearly 35,000 issues and pull requests</li> -</ul> -<p>Hidden in all those numbers are millions and millions of people that interact with Bootstrap just by visiting the sites and apps built with it. It’s still mind-blowing to see what’s been built with it after over the years, especially with how it all started.</p> -<p>Back in early 2011, the two of us were just a couple of nerds working at Twitter—Jacob was an engineer working on internal tools, me a product designer working on ads. Our paths crossed when the project I was working on needed to have its own internal tools app built for managing Twitter ad campaigns. Over a few months, we started working more and more together before ultimately deciding to release our project to the world.</p> -<p>Here we are 10 years later, still just a handful of nerds doing what we love, contributing to open source, and having an impact on people’s lives through our work. Bootstrap continues to be a passion project for me, from major rewrites to new features and from a growing <a href="https://icons.getbootstrap.com">icon library</a> to a full-blown <a href="https://themes.getbootstrap.com">marketplace</a>. It’s been an incredible journey, and one that’s still going strong thanks to the community’s love and the support of a small group of maintainers over the years.</p> -<p>The maintainers and contributors deserve the utmost thanks and appreciation. Please join me in thanking them—and every other open source maintainer!—whenever and however frequently you can. While this list can never fully represent all the contributions made to Bootstrap, I want to give a special shoutout to maintainers past and present, and some of the most prolific contributors.</p> -<ul> -<li><a href="https://github.com/xhmikosr">@xhmikosr</a></li> -<li><a href="https://github.com/martijncuppens">@martijncuppens</a></li> -<li><a href="https://github.com/johann-s">@johann-s</a></li> -<li><a href="https://github.com/patrickhlauke">@patrickhlauke</a></li> -<li><a href="https://github.com/geosot">@geosot</a></li> -<li><a href="https://github.com/rohit2sharma95">@rohit2sharma95</a></li> -<li><a href="https://github.com/alpadev">@alpadev</a></li> -<li><a href="https://github.com/ffoodd">@ffoodd</a></li> -<li><a href="https://github.com/cvrebert">@cvrebert</a></li> -<li><a href="https://github.com/andresgalante">@andresgalante</a></li> -<li><a href="https://github.com/ysds">@ysds</a></li> -<li><a href="https://github.com/thomas-mcdonald">@thomas-mcdonald</a></li> -<li><a href="https://github.com/glebm">@glebm</a></li> -<li><a href="https://github.com/zlatanvasovic">@zlatanvasovic</a></li> -<li><a href="https://github.com/hnrch02">@hnrch02</a></li> -<li><a href="https://github.com/juthilo">@juthilo</a></li> -<li><a href="https://github.com/bardiharborow">@bardiharborow</a></li> -<li><a href="https://github.com/coliff">@coliff</a></li> -<li><a href="https://github.com/vsn4ik">@vsn4ik</a></li> -<li><a href="https://github.com/supergibbs">@supergibbs</a></li> -</ul> -<p>Thank you again, folks. And to everyone who has used Bootstrap over the years, thank you for making a decade of building with Bootstrap possible. Cheers to whatever comes next, and see you soon for our next release.</p> -<p><3,<br> -<a href="https://twitter.com/mdo">@mdo</a></p> - </div> </div> diff --git a/page/4/index.html b/page/4/index.html index 44236d2e..b5077a2c 100644 --- a/page/4/index.html +++ b/page/4/index.html @@ -203,6 +203,78 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2021/08/19/ten/" class="text-decoration-none"> + Ten Years of Bootstrap + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="19 Aug 21 00:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + August 19, 2021 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/KQ6zr6kCPj8?rel=0&start=85" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p><a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter">Ten years ago today</a>, we shipped the <a href="https://getbootstrap.com/1.0.0/">first release of Bootstrap</a>. Releasing it on GitHub was my first real plunge into open source—what an introduction! Here we are a decade later with one of the most widely used open source projects and frontend toolkits on the web. Happy birthday, Bootstrap—what a ride!</p> +<p>While numbers certainly don’t tell the whole story, Bootstrap has reached some incredible milestones over the past decade. Here are some highlights:</p> +<ul> +<li><strong>Over 2.5 billion pageviews for our docs.</strong> That’s more than 685,000 a day.</li> +<li><strong>394,000,000 <a href="https://npm-stat.com/charts.html?package=bootstrap&from=2011-08-01&to=2021-08-18">npm downloads</a></strong> since 2015—over 131 million of which were in 2020 alone. That’s 180,000 a day over the last six years.</li> +<li><strong>50 million RubyGems downloads</strong></li> +<li><strong>57 million <a href="https://www.nuget.org/packages/bootstrap/">NuGet downloads</a></strong></li> +<li><strong>7.5 million <a href="https://packagist.org/packages/twbs/bootstrap/stats">Packagist installs</a></strong></li> +<li><strong>Used by over <a href="https://w3techs.com/technologies/details/js-bootstrap">22% of all websites</a></strong></li> +<li>Used by 2.7 million projects on GitHub</li> +<li>Over 21,100 commits on GitHub with nearly 35,000 issues and pull requests</li> +</ul> +<p>Hidden in all those numbers are millions and millions of people that interact with Bootstrap just by visiting the sites and apps built with it. It’s still mind-blowing to see what’s been built with it after over the years, especially with how it all started.</p> +<p>Back in early 2011, the two of us were just a couple of nerds working at Twitter—Jacob was an engineer working on internal tools, me a product designer working on ads. Our paths crossed when the project I was working on needed to have its own internal tools app built for managing Twitter ad campaigns. Over a few months, we started working more and more together before ultimately deciding to release our project to the world.</p> +<p>Here we are 10 years later, still just a handful of nerds doing what we love, contributing to open source, and having an impact on people’s lives through our work. Bootstrap continues to be a passion project for me, from major rewrites to new features and from a growing <a href="https://icons.getbootstrap.com">icon library</a> to a full-blown <a href="https://themes.getbootstrap.com">marketplace</a>. It’s been an incredible journey, and one that’s still going strong thanks to the community’s love and the support of a small group of maintainers over the years.</p> +<p>The maintainers and contributors deserve the utmost thanks and appreciation. Please join me in thanking them—and every other open source maintainer!—whenever and however frequently you can. While this list can never fully represent all the contributions made to Bootstrap, I want to give a special shoutout to maintainers past and present, and some of the most prolific contributors.</p> +<ul> +<li><a href="https://github.com/xhmikosr">@xhmikosr</a></li> +<li><a href="https://github.com/martijncuppens">@martijncuppens</a></li> +<li><a href="https://github.com/johann-s">@johann-s</a></li> +<li><a href="https://github.com/patrickhlauke">@patrickhlauke</a></li> +<li><a href="https://github.com/geosot">@geosot</a></li> +<li><a href="https://github.com/rohit2sharma95">@rohit2sharma95</a></li> +<li><a href="https://github.com/alpadev">@alpadev</a></li> +<li><a href="https://github.com/ffoodd">@ffoodd</a></li> +<li><a href="https://github.com/cvrebert">@cvrebert</a></li> +<li><a href="https://github.com/andresgalante">@andresgalante</a></li> +<li><a href="https://github.com/ysds">@ysds</a></li> +<li><a href="https://github.com/thomas-mcdonald">@thomas-mcdonald</a></li> +<li><a href="https://github.com/glebm">@glebm</a></li> +<li><a href="https://github.com/zlatanvasovic">@zlatanvasovic</a></li> +<li><a href="https://github.com/hnrch02">@hnrch02</a></li> +<li><a href="https://github.com/juthilo">@juthilo</a></li> +<li><a href="https://github.com/bardiharborow">@bardiharborow</a></li> +<li><a href="https://github.com/coliff">@coliff</a></li> +<li><a href="https://github.com/vsn4ik">@vsn4ik</a></li> +<li><a href="https://github.com/supergibbs">@supergibbs</a></li> +</ul> +<p>Thank you again, folks. And to everyone who has used Bootstrap over the years, thank you for making a decade of building with Bootstrap possible. Cheers to whatever comes next, and see you soon for our next release.</p> +<p><3,<br> +<a href="https://twitter.com/mdo">@mdo</a></p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2021/08/04/bootstrap-5-1-0/" class="text-decoration-none"> Bootstrap 5.1.0 </a> @@ -212,7 +284,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="04 Aug 21 00:00 UTC"> @@ -225,7 +297,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/xBTqRd09y3E?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/xBTqRd09y3E?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -620,306 +692,6 @@ <h2 id="figma">Figma</h2> <p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/community/file/972989644486753519/Bootstrap-Icons-v1.5.0">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2021/05/05/bootstrap-5/" class="text-decoration-none"> - Bootstrap 5 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="05 May 21 09:30 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - May 05, 2021 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/FGBhQbmPwH8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contributes to Bootstrap. Thanks to all who have helped us get here!</p> -<p>Keep reading for details on what’s new compared to v4 and what’s coming for subsequent releases. Want to get right to it? <strong><a href="https://getbootstrap.com">Head to the new v5 docs</a></strong> or fly by the seat of your pants and just <code>npm i bootstrap</code>.</p> -<hr class="my-5"> -<p><strong>In this post:</strong></p> -<ul> -<li><a href="#new-logo">New logo!</a></li> -<li><a href="#new-offcanvas-component">New offcanvas component</a></li> -<li><a href="#new-accordion">New accordion</a></li> -<li><a href="#new-and-updated-forms">New and updated forms</a> -<ul> -<li><a href="#checks-and-radios">Checks and radios</a></li> -<li><a href="#floating-labels">Floating labels</a></li> -<li><a href="#new-file-input">New file input</a></li> -<li><a href="#simplified-layout">Simplified layout</a></li> -</ul> -</li> -<li><a href="#rtl-is-here">RTL is here!</a></li> -<li><a href="#overhauled-utilities">Overhauled utilities</a> -<ul> -<li><a href="#new-utilities-api">New utilities API</a></li> -<li><a href="#new-utilities">New utilities</a></li> -<li><a href="#logical-properties-for-spacing-utilities">Logical properties for spacing utilities</a></li> -</ul> -</li> -<li><a href="#new-snippet-examples">New snippet examples</a></li> -<li><a href="#grid-and-layout">Grid and layout</a></li> -<li><a href="#more-component-updates">More component updates</a></li> -<li><a href="#improved-customizing">Improved customizing</a></li> -<li><a href="#dart-sass">Dart Sass</a></li> -<li><a href="#browser-support">Browser support</a></li> -<li><a href="#javascript">JavaScript</a></li> -<li><a href="#migration-guide">Migration guide</a></li> -<li><a href="#get-the-release">Get the release</a></li> -<li><a href="#whats-next">What’s next</a></li> -<li><a href="#v510-preview">v5.1.0 preview</a></li> -<li><a href="#support-the-team">Support the team</a></li> -</ul> -<hr class="my-5"> -<h2 id="new-logo">New logo!</h2> -<p><img src="/assets/img/2020/06/v5-new-logo.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap logo" loading="lazy" width="2000" height="1000"> -</p> -<p>One of the biggest changes with v5 came with our redesigned logo and updated docs design. Inspired by the work we’ve done in <a href="https://icons.getbootstrap.com">Bootstrap Icons</a>, our new logo is a callback to CSS’s curly braces and our longstanding <code>B</code> icon. It’s a small upgrade, but a fun one nonetheless, and one that we feel helps set the tone for this new major release. Still the same Bootstrap, just slightly refined. 😅</p> -<p><a href="https://getbootstrap.com"><img src="/assets/img/2020/06/v5-home.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap docs layout" loading="lazy" width="1500" height="1150"> -</a></p> -<p>And <a href="https://getbootstrap.com">the new docs</a> are brighter, better organized with new content sections, and also feature improved navigation.</p> -<h2 id="new-offcanvas-component">New offcanvas component</h2> -<p>One of our big new component additions is the all-new offcanvas!</p> -<p><a href="https://getbootstrap.com/docs/5.0/components/offcanvas/"><img src="/assets/img/2021/03/bootstrap-docs-offcanvas.png" class="d-block img-fluid mb-2 rounded border" alt="Offcanvas example" loading="lazy" width="1614" height="896"> -</a></p> -<p>Built on and sharing fundamental pieces of our modals, <a href="https://getbootstrap.com/docs/5.0/components/offcanvas/">our new offcanvas component</a> comes with a configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the top, right, bottom, or left of the viewport. Configure these options with <code>data</code> attributes or via the JavaScript APIs.</p> -<h2 id="new-accordion">New accordion</h2> -<p>We’ve replaced our <code>.card</code> accordion component with a <a href="https://getbootstrap.com/docs/5.0/components/accordion/">brand new <code>.accordion</code> component</a>, solving several bugs in the process. Our new accordion still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it, it’s better and easier than ever to use.</p> -<p><a href="https://getbootstrap.com/docs/5.0/components/accordion/"><img src="/assets/img/2020/11/accordion.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap accordion" loading="lazy" width="1510" height="626"> -</a></p> -<p>The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. We’ve included support for a flush accordion (add <code>.accordion-flush</code>) to remove the outer borders, allowing for easier placement inside parent elements.</p> -<p><a href="https://getbootstrap.com/docs/5.0/components/accordion/">Visit the new docs page</a> to learn more.</p> -<h2 id="new-and-updated-forms">New and updated forms</h2> -<p>We’ve overhauled our <a href="https://getbootstrap.com/docs/5.0/forms/">Forms documentation and components</a>. We’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.</p> -<p><a href="https://getbootstrap.com/docs/5.0/forms/overview/"><img src="/assets/img/2020/06/v5-forms.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap 5 forms docs" loading="lazy" width="1500" height="1090"> -</a></p> -<p>Alongside new docs pages, we’ve redesigned and de-duped all our form controls. In v4 we introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, we’ve gone fully custom.</p> -<h3 id="checks-and-radios">Checks and radios</h3> -<p><a href="https://getbootstrap.com/docs/5.0/forms/checks-radios/"><img src="/assets/img/2020/06/v5-checks.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap 5 checks" loading="lazy" width="902" height="568"> -</a></p> -<p>If you’re familiar with v4’s form markup, this shouldn’t look too far off for you. With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements, we have a much more consistent look and feel.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> Default checkbox -</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> -</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> Default radio -</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> -</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> -</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> -</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> -</span></span></code></pre></div><p>Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser. These new form controls are all built on completely semantic, standard form controls—no more superfluous markup, just form controls and labels.</p> -<h3 id="floating-labels">Floating labels</h3> -<p><img src="/assets/img/2020/11/floating-forms.png" class="d-block img-fluid mb-2 rounded border" alt="New floating labels" loading="lazy" width="1610" height="216"> -</p> -<p><a href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Floating labels</a> include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!</p> -<h3 id="new-file-input">New file input</h3> -<p><img src="/assets/img/2020/11/file-input.png" class="d-block img-fluid mb-2 rounded border" alt="New file input" loading="lazy" width="1610" height="934"> -</p> -<p>We’ve dropped our custom <code>.form-file</code> class for additional styles on the <code>.form-control</code> class. This means we no longer require additional JavaScript to make our file input styles functional—the <a href="https://v5.getbootstrap.com/docs/5.0/forms/form-control/#file-input">new form file</a> is all CSS!</p> -<h3 id="simplified-layout">Simplified layout</h3> -<p>Using our new grid updates, <a href="https://getbootstrap.com/docs/5.0/forms/layout/">form layout</a> has never been easier. We’ve dropped the <code>.form-group</code>, <code>.form-row</code>, and <code>.form-inline</code> for the grid system.</p> -<p><a href="https://getbootstrap.com/docs/5.0/forms/layout/"><img src="/assets/img/2021/05/v5-form-layout.png" class="d-block img-fluid mb-2 rounded border" alt="New form layout via grid" loading="lazy" width="1610" height="622"> -</a></p> -<p>Be sure to <a href="https://getbootstrap.com/docs/5.0/forms/overview/">explore the new forms docs</a> and let us know what you think.</p> -<h2 id="rtl-is-here">RTL is here!</h2> -<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/"><img src="/assets/img/2020/12/rtl-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap RTL docs" loading="lazy" width="1280" height="800"> -</a></p> -<p>We’ve finally added RTL support to Bootstrap! At a high level, our RTL approach includes a handful of changes:</p> -<ul> -<li> -<p><strong>New RTL versions of our CSS dist file</strong>, which includes our grid, Reboot, utilities, and standard bundles. <a href="https://getbootstrap.com/docs/5.0/getting-started/contents/">See the Contents page for a full list of files.</a></p> -</li> -<li> -<p><strong><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">New RTL documentation</a></strong> to help you get started.</p> -</li> -<li> -<p><strong><a href="https://getbootstrap.com/docs/5.0/examples/#rtl">Five new RTL Examples</a></strong> that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all-new right-to-left equivalents.</p> -</li> -<li> -<p><strong>Two new cheatsheet kitchen sink pages</strong>—the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">default cheatsheet</a> for our standard CSS and the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">RTL cheatsheet</a>.</p> -</li> -</ul> -<p>Our approach is built on <a href="https://rtlcss.com/">RTLCSS</a>, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.</p> -<h2 id="overhauled-utilities">Overhauled utilities</h2> -<p>Given the love utility-driven frameworks have garnered the last few years, we’ve invested in adding more utilities to Bootstrap along with a new method of managing them across your projects.</p> -<h3 id="new-utilities-api">New utilities API</h3> -<p>We’ve implemented a brand <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new utility API</a> into Bootstrap 5 as the primary way to extend Bootstrap’s default utility classes. Easily generate and customize utilities with support for custom class names, support for generating state-based classes like <code>:hover</code>, print versions, and more.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> -</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span> -</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> -</span></span></code></pre></div><p>Ever since utilities become a preferred way to build, we’ve been working to find the right balance to implement them in Bootstrap while providing control and customization. In v4, we did this with global <code>$enable-*</code> classes, and we’ve even carried that forward in v5. But with an API-based approach, we’ve created a language and syntax in Sass to create your own utilities on the fly while also being able to modify or remove those we provide.</p> -<p>Head to the <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new Utilities API docs</a> to learn more.</p> -<h3 id="new-utilities">New utilities</h3> -<p>Speaking of utilities, we’ve added a ton of new ones to our arsenal, including:</p> -<ul> -<li>Added positioning utilities: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> with <code>0</code>, <code>50%</code>, and <code>100%</code> values</li> -<li>Added <code>.d-grid</code> option, along with new <code>gap</code> utilities for easy grid layouts</li> -<li>Added <code>.fs</code> utilities for <code>font-size</code></li> -<li>Renamed <code>font-weight</code> utilities to <code>.fw</code></li> -<li>Added <code>.rounded-1</code>, <code>.rounded-2</code>, and <code>.rounded-3</code> for new small, medium, and large <code>border-radius</code> utilities</li> -<li>Added <code>.overflow-visible</code> and <code>.overflow-scroll</code> utilities</li> -</ul> -<p>Check out the <a href="https://getbootstrap.com/docs/5.0/migration/">Migration guide</a> and <a href="https://getbootstrap.com/docs/5.0/utilities/">utilities documentation</a> for more details.</p> -<h3 id="logical-properties-for-spacing-utilities">Logical properties for spacing utilities</h3> -<p>Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and <strong>have renamed several classes and variables</strong>. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!</p> -<p>Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. Things like <code>align-items-end</code> have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.</p> -<p>For example, in a LTR context, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>. Be sure to <a href="https://getbootstrap.com/docs/5.0/migration/#rtl">read the RTL Migration guide</a> for a full list of renamed classes and variables.</p> -<h2 id="new-snippet-examples">New snippet examples</h2> -<p><a href="https://getbootstrap.com/docs/5.0/examples/"><img src="/assets/img/2021/03/bootstrap-new-examples.png" class="d-block img-fluid mb-2 rounded border" alt="New examples" loading="lazy" width="3360" height="2100"> -</a></p> -<p>We’ve added four brand new snippet-heavy examples and refreshed a few other examples while we were at it. These new snippet examples feature several variations of common components, served up in different ways for you to easily copy and paste.</p> -<ul> -<li><a href="https://getbootstrap.com/docs/5.0/examples/headers/">Headers</a></li> -<li><a href="https://getbootstrap.com/docs/5.0/examples/heroes/">Heroes</a></li> -<li><a href="https://getbootstrap.com/docs/5.0/examples/features/">Features</a></li> -<li><a href="https://getbootstrap.com/docs/5.0/examples/sidebars/">Sidebars</a></li> -</ul> -<p>These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.</p> -<p><a href="https://getbootstrap.com/docs/5.0/examples/starter-template/"><img src="/assets/img/2021/03/starter-template.png" class="d-block img-fluid mb-2 rounded border" alt="New starter example" loading="lazy" width="3584" height="2240"> -</a></p> -<p>We’ve also updated our <a href="https://getbootstrap.com/docs/5.0/examples/starter-template/">starter template</a> with a refreshed design and more resources.</p> -<h2 id="grid-and-layout">Grid and layout</h2> -<p>Our grid system and layout options saw some changes to streamline and improve things, namely:</p> -<ul> -<li>Column classes can now be used as <code>width</code> utilities (e.g., <code>.col-6</code> is <code>width: 50%</code>) as <code>padding</code> is no longer applied outside a <code>.row</code>.</li> -<li>New gutter utilities can responsively customize horizontal and vertical grid gutters. The gutter width has also been reduced to <code>1.5rem</code>.</li> -<li>Removed <code>position: relative</code> from column classes</li> -<li>Dropped the <code>.media</code> component for utilities</li> -</ul> -<p>We also updated our layout documentation to break apart the exceptionally long pages into more focused topics. We’ve also added a clarified explanation of breakpoints, containers, and more.</p> -<p>Check out the <a href="https://getbootstrap.com/docs/5.0/migration/">Migration guide</a> and <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/">layout documentation</a> for more details.</p> -<h2 id="more-component-updates">More component updates</h2> -<p>Across the board we’ve made a number of other enhancements and changes to key components:</p> -<ul> -<li>We’ve overhauled the JavaScript and positioning for our dropdowns as part of our adoption of Popper 2. You can see <a href="https://getbootstrap.com/docs/5.0/components/dropdowns/#alignment-options">all the options in a new example in our docs</a> and new CSS selectors and data attributes used to position them.</li> -<li>Dropdown menus now have a new <code>.dropdown-menu-dark</code> modifier class.</li> -<li>Similarly, carousels now have a new <code>.carousel-dark</code> modifier class to invert the controls, text, and indicators.</li> -<li>Added <a href="https://getbootstrap.com/docs/5.0/components/alerts/#icons">icon examples to our Alert component</a> for adding Bootstrap Icons (or other icon libraries) using utilities</li> -<li>Our close button has been redesigned with an SVG <code>background-image</code> and improved cross-browser styling.</li> -<li>We’ve dropped the <code>.btn-block</code> class for utilities.</li> -<li>We’ve updated navbars with a new <code>.navbar-nav-scroll</code> for vertical <code>max-height</code> and scrolling of when a collapsed navbar is opened</li> -<li>List groups have a <a href="https://getbootstrap.com/docs/5.0/components/list-group/#numbered">new <code>.list-group-numbered</code> modifier class</a> that uses pseudo-elements to create numbered list group items.</li> -</ul> -<h2 id="improved-customizing">Improved customizing</h2> -<p>We’ve hunkered down and improved our documentation in several places, giving more explanation, removing ambiguity, and providing much more support for extending Bootstrap. It all starts with a whole <a href="https://v5.getbootstrap.com/docs/5.0/customize/overview/">new Customize section</a>.</p> -<p><img src="/assets/img/2020/06/v5-customize.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 5 customize docs" loading="lazy" width="1500" height="1150"> -</p> -<p>v5’s Customize docs expand on v4’s Theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. We’ve fleshed out more content here and even provided a <a href="https://github.com/twbs/bootstrap-npm-starter">starter npm project</a> for you to get started with faster and easier. It’s also available as a template repo on GitHub, so you can freely fork and go.</p> -<p><img src="/assets/img/2020/06/v5-color-palette.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 5 color palette" loading="lazy" width="1774" height="552"> -</p> -<p>We’ve expanded our color palette in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without ever leaving the codebase. We’ve also done some work to improve color contrast, and even provided color contrast metrics in our Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.</p> -<p><a href="https://getbootstrap.com/docs/5.0/components/alerts/#sass"><img src="/assets/img/2021/03/bootstrap-docs-sass.png" class="d-block img-fluid mb-2 rounded border" alt="New Sass docs" loading="lazy" width="3584" height="2240"> -</a></p> -<p>We’ve also added new sections to most of our pages to document the source Sass code that powers each component. Variables, mixins, loops, and maps are all rendered and kept up to date in each page, making it easier to reference and customize values as you build.</p> -<h2 id="dart-sass">Dart Sass</h2> -<p>We’ve switched to Dart Sass with LibSass being deprecated. We’ve been testing our builds with Dart Sass for a while and decided to make the switch with LibSass being deprecated just a couple of weeks ago. We’re holding on to the Sass modules for now. We’re still not using the new module system for compatibility concerns and a greater gap for folks upgrading from v4.</p> -<h2 id="browser-support">Browser support</h2> -<p>We’ve dropped a ton of older browsers in this update, making it one of our biggest leaps in a while:</p> -<ul> -<li>Dropped Microsoft Edge Legacy</li> -<li>Dropped Internet Explorer 10 and 11</li> -<li>Dropped Firefox < 60</li> -<li>Dropped Safari < 10</li> -<li>Dropped iOS Safari < 10</li> -<li>Dropped Chrome < 60</li> -<li>Dropped Android < 6</li> -</ul> -<p>You can find the full browser and device support in our <code>.browserslistrc</code>.</p> -<h2 id="javascript">JavaScript</h2> -<p>The biggest change to our JavaScript has been the removal of jQuery, but we’ve also made a number of enhancements beyond that as well.</p> -<ul> -<li>No more jQuery!</li> -<li>All plugins can now accept a CSS selector as the first argument.</li> -<li>Updated to Popper 2!</li> -<li>Data attributes for all JavaScript plugins are now namespaced with <code>bs</code>. For example, we use data-bs-toggle instead of data-toggle.</li> -<li>We overhauled dropdown, popover, and tooltip placement with the arrival of Popper v2.</li> -<li>Toast positioning was also overhauled and now leverages our new position utilities.</li> -<li>Added ability to use custom classes for tooltips and popovers.</li> -<li>Made various optimizations to better share code across components.</li> -<li>Changed dropdowns to emit events on <code>.dropdown-toggle</code> instead of <code>.dropdown</code>.</li> -<li>Removed underscore from public static methods like <code>_getInstance()</code> to <code>getInstance()</code>.</li> -<li>Renamed <code>whiteList</code> to <code>allowList</code> in popovers and tooltips`</li> -</ul> -<h2 id="migration-guide">Migration guide</h2> -<p>We’ve updated our <a href="https://getbootstrap.com/docs/5.0/migration/">migration guide page</a> to consolidate all our changes across the six pre-releases into a single set of changes. We’ve condensed much of the content this way and added <span class="badge bg-danger text-white">Breaking change</span> labels throughout to help draw you attention to potential gotchas while upgrading.</p> -<p>We still think there’s more to do here—including tutorial-like guidance on the code changes, diffs and code snippets for our dependencies, etc. If you have suggestions or want to contribute, please open an issue or pull request.</p> -<hr class="my-5"> -<p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F27">list of issues and pull requests in v5.0.0</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/27">v5.0.0 project board</a>, too.</p> -<h2 id="get-the-release">Get the release</h2> -<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this update as our new latest release on npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap -</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</p> -<h2 id="whats-next">What’s next</h2> -<p>Looking ahead, we have some other releases on the horizon:</p> -<ul> -<li><a href="https://github.com/twbs/bootstrap/projects/35">Bootstrap v4.6.1</a></li> -<li><a href="https://icons.getbootstrap.com">Bootstrap Icons</a> v1.5.0</li> -<li><a href="https://github.com/twbs/bootstrap-npm-starter">Bootstrap npm starter</a> v2.0.0 with support for Bootstrap 5</li> -<li><a href="https://github.com/twbs/bootstrap/projects/38">Bootstrap v5.0.1</a> for follow-up bug fixes from our initial release</li> -<li><a href="https://github.com/twbs/bootstrap/projects/31">Bootstrap v5.1.0</a> for our first minor feature release</li> -</ul> -<p>Feel free to open issues or pull requests if you have any additional ideas for upcoming releases!</p> -<h2 id="v510-preview">v5.1.0 preview</h2> -<p>While we were polishing up this release, we also had our eyes towards the future to ship a few minor releases. Here’s a quick look at what’s coming in our next minor release, <a href="https://github.com/twbs/bootstrap/projects/31">v5.1.0</a>:</p> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/31813">Opt-in CSS Grid support</a></li> -<li><a href="https://github.com/twbs/bootstrap/pull/32319">Expanded Sass maps for color palette</a></li> -<li><a href="https://github.com/twbs/bootstrap/pull/31859">New skeleton placeholder component</a></li> -<li><a href="https://github.com/twbs/bootstrap/pull/33781">New opacity utilities</a></li> -<li>and more!</li> -</ul> -<p>And more features and updates are planned for a few more releases after that! Check out our <a href="https://github.com/twbs/bootstrap/projects">projects on GitHub</a> for a closer look.</p> -<h2 id="support-the-team">Support the team</h2> -<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div> </div> diff --git a/page/5/index.html b/page/5/index.html index 11e4bf1c..cf98f121 100644 --- a/page/5/index.html +++ b/page/5/index.html @@ -203,6 +203,306 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2021/05/05/bootstrap-5/" class="text-decoration-none"> + Bootstrap 5 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="05 May 21 09:30 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + May 05, 2021 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/FGBhQbmPwH8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contributes to Bootstrap. Thanks to all who have helped us get here!</p> +<p>Keep reading for details on what’s new compared to v4 and what’s coming for subsequent releases. Want to get right to it? <strong><a href="https://getbootstrap.com">Head to the new v5 docs</a></strong> or fly by the seat of your pants and just <code>npm i bootstrap</code>.</p> +<hr class="my-5"> +<p><strong>In this post:</strong></p> +<ul> +<li><a href="#new-logo">New logo!</a></li> +<li><a href="#new-offcanvas-component">New offcanvas component</a></li> +<li><a href="#new-accordion">New accordion</a></li> +<li><a href="#new-and-updated-forms">New and updated forms</a> +<ul> +<li><a href="#checks-and-radios">Checks and radios</a></li> +<li><a href="#floating-labels">Floating labels</a></li> +<li><a href="#new-file-input">New file input</a></li> +<li><a href="#simplified-layout">Simplified layout</a></li> +</ul> +</li> +<li><a href="#rtl-is-here">RTL is here!</a></li> +<li><a href="#overhauled-utilities">Overhauled utilities</a> +<ul> +<li><a href="#new-utilities-api">New utilities API</a></li> +<li><a href="#new-utilities">New utilities</a></li> +<li><a href="#logical-properties-for-spacing-utilities">Logical properties for spacing utilities</a></li> +</ul> +</li> +<li><a href="#new-snippet-examples">New snippet examples</a></li> +<li><a href="#grid-and-layout">Grid and layout</a></li> +<li><a href="#more-component-updates">More component updates</a></li> +<li><a href="#improved-customizing">Improved customizing</a></li> +<li><a href="#dart-sass">Dart Sass</a></li> +<li><a href="#browser-support">Browser support</a></li> +<li><a href="#javascript">JavaScript</a></li> +<li><a href="#migration-guide">Migration guide</a></li> +<li><a href="#get-the-release">Get the release</a></li> +<li><a href="#whats-next">What’s next</a></li> +<li><a href="#v510-preview">v5.1.0 preview</a></li> +<li><a href="#support-the-team">Support the team</a></li> +</ul> +<hr class="my-5"> +<h2 id="new-logo">New logo!</h2> +<p><img src="/assets/img/2020/06/v5-new-logo.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap logo" loading="lazy" width="2000" height="1000"> +</p> +<p>One of the biggest changes with v5 came with our redesigned logo and updated docs design. Inspired by the work we’ve done in <a href="https://icons.getbootstrap.com">Bootstrap Icons</a>, our new logo is a callback to CSS’s curly braces and our longstanding <code>B</code> icon. It’s a small upgrade, but a fun one nonetheless, and one that we feel helps set the tone for this new major release. Still the same Bootstrap, just slightly refined. 😅</p> +<p><a href="https://getbootstrap.com"><img src="/assets/img/2020/06/v5-home.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap docs layout" loading="lazy" width="1500" height="1150"> +</a></p> +<p>And <a href="https://getbootstrap.com">the new docs</a> are brighter, better organized with new content sections, and also feature improved navigation.</p> +<h2 id="new-offcanvas-component">New offcanvas component</h2> +<p>One of our big new component additions is the all-new offcanvas!</p> +<p><a href="https://getbootstrap.com/docs/5.0/components/offcanvas/"><img src="/assets/img/2021/03/bootstrap-docs-offcanvas.png" class="d-block img-fluid mb-2 rounded border" alt="Offcanvas example" loading="lazy" width="1614" height="896"> +</a></p> +<p>Built on and sharing fundamental pieces of our modals, <a href="https://getbootstrap.com/docs/5.0/components/offcanvas/">our new offcanvas component</a> comes with a configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the top, right, bottom, or left of the viewport. Configure these options with <code>data</code> attributes or via the JavaScript APIs.</p> +<h2 id="new-accordion">New accordion</h2> +<p>We’ve replaced our <code>.card</code> accordion component with a <a href="https://getbootstrap.com/docs/5.0/components/accordion/">brand new <code>.accordion</code> component</a>, solving several bugs in the process. Our new accordion still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it, it’s better and easier than ever to use.</p> +<p><a href="https://getbootstrap.com/docs/5.0/components/accordion/"><img src="/assets/img/2020/11/accordion.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap accordion" loading="lazy" width="1510" height="626"> +</a></p> +<p>The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. We’ve included support for a flush accordion (add <code>.accordion-flush</code>) to remove the outer borders, allowing for easier placement inside parent elements.</p> +<p><a href="https://getbootstrap.com/docs/5.0/components/accordion/">Visit the new docs page</a> to learn more.</p> +<h2 id="new-and-updated-forms">New and updated forms</h2> +<p>We’ve overhauled our <a href="https://getbootstrap.com/docs/5.0/forms/">Forms documentation and components</a>. We’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.</p> +<p><a href="https://getbootstrap.com/docs/5.0/forms/overview/"><img src="/assets/img/2020/06/v5-forms.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap 5 forms docs" loading="lazy" width="1500" height="1090"> +</a></p> +<p>Alongside new docs pages, we’ve redesigned and de-duped all our form controls. In v4 we introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, we’ve gone fully custom.</p> +<h3 id="checks-and-radios">Checks and radios</h3> +<p><a href="https://getbootstrap.com/docs/5.0/forms/checks-radios/"><img src="/assets/img/2020/06/v5-checks.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap 5 checks" loading="lazy" width="902" height="568"> +</a></p> +<p>If you’re familiar with v4’s form markup, this shouldn’t look too far off for you. With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements, we have a much more consistent look and feel.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">value</span><span class="o">=</span><span class="s">""</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default checkbox +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">name</span><span class="o">=</span><span class="s">"flexRadioDefault"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexRadioDefault1"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Default radio +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> +</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check form-switch"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-input"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">id</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">label</span> <span class="na">class</span><span class="o">=</span><span class="s">"form-check-label"</span> <span class="na">for</span><span class="o">=</span><span class="s">"flexSwitchCheckDefault"</span><span class="p">></span>Default switch checkbox input<span class="p"></</span><span class="nt">label</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><p>Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser. These new form controls are all built on completely semantic, standard form controls—no more superfluous markup, just form controls and labels.</p> +<h3 id="floating-labels">Floating labels</h3> +<p><img src="/assets/img/2020/11/floating-forms.png" class="d-block img-fluid mb-2 rounded border" alt="New floating labels" loading="lazy" width="1610" height="216"> +</p> +<p><a href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Floating labels</a> include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!</p> +<h3 id="new-file-input">New file input</h3> +<p><img src="/assets/img/2020/11/file-input.png" class="d-block img-fluid mb-2 rounded border" alt="New file input" loading="lazy" width="1610" height="934"> +</p> +<p>We’ve dropped our custom <code>.form-file</code> class for additional styles on the <code>.form-control</code> class. This means we no longer require additional JavaScript to make our file input styles functional—the <a href="https://v5.getbootstrap.com/docs/5.0/forms/form-control/#file-input">new form file</a> is all CSS!</p> +<h3 id="simplified-layout">Simplified layout</h3> +<p>Using our new grid updates, <a href="https://getbootstrap.com/docs/5.0/forms/layout/">form layout</a> has never been easier. We’ve dropped the <code>.form-group</code>, <code>.form-row</code>, and <code>.form-inline</code> for the grid system.</p> +<p><a href="https://getbootstrap.com/docs/5.0/forms/layout/"><img src="/assets/img/2021/05/v5-form-layout.png" class="d-block img-fluid mb-2 rounded border" alt="New form layout via grid" loading="lazy" width="1610" height="622"> +</a></p> +<p>Be sure to <a href="https://getbootstrap.com/docs/5.0/forms/overview/">explore the new forms docs</a> and let us know what you think.</p> +<h2 id="rtl-is-here">RTL is here!</h2> +<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/"><img src="/assets/img/2020/12/rtl-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap RTL docs" loading="lazy" width="1280" height="800"> +</a></p> +<p>We’ve finally added RTL support to Bootstrap! At a high level, our RTL approach includes a handful of changes:</p> +<ul> +<li> +<p><strong>New RTL versions of our CSS dist file</strong>, which includes our grid, Reboot, utilities, and standard bundles. <a href="https://getbootstrap.com/docs/5.0/getting-started/contents/">See the Contents page for a full list of files.</a></p> +</li> +<li> +<p><strong><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">New RTL documentation</a></strong> to help you get started.</p> +</li> +<li> +<p><strong><a href="https://getbootstrap.com/docs/5.0/examples/#rtl">Five new RTL Examples</a></strong> that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all-new right-to-left equivalents.</p> +</li> +<li> +<p><strong>Two new cheatsheet kitchen sink pages</strong>—the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">default cheatsheet</a> for our standard CSS and the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">RTL cheatsheet</a>.</p> +</li> +</ul> +<p>Our approach is built on <a href="https://rtlcss.com/">RTLCSS</a>, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.</p> +<h2 id="overhauled-utilities">Overhauled utilities</h2> +<p>Given the love utility-driven frameworks have garnered the last few years, we’ve invested in adding more utilities to Bootstrap along with a new method of managing them across your projects.</p> +<h3 id="new-utilities-api">New utilities API</h3> +<p>We’ve implemented a brand <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new utility API</a> into Bootstrap 5 as the primary way to extend Bootstrap’s default utility classes. Easily generate and customize utilities with support for custom class names, support for generating state-based classes like <code>:hover</code>, print versions, and more.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">()</span> <span class="k">!default</span><span class="p">;</span> +</span></span><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"margin"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">responsive</span><span class="o">:</span> <span class="n">true</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">margin</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="n">m</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$spacers</span><span class="o">,</span> <span class="p">(</span><span class="na">auto</span><span class="o">:</span> <span class="ni">auto</span><span class="p">))</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="n">o</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="c1">// ...</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span><span class="o">,</span> <span class="nv">$utilities</span><span class="p">);</span> +</span></span></code></pre></div><p>Ever since utilities become a preferred way to build, we’ve been working to find the right balance to implement them in Bootstrap while providing control and customization. In v4, we did this with global <code>$enable-*</code> classes, and we’ve even carried that forward in v5. But with an API-based approach, we’ve created a language and syntax in Sass to create your own utilities on the fly while also being able to modify or remove those we provide.</p> +<p>Head to the <a href="https://getbootstrap.com/docs/5.0/utilities/api/">new Utilities API docs</a> to learn more.</p> +<h3 id="new-utilities">New utilities</h3> +<p>Speaking of utilities, we’ve added a ton of new ones to our arsenal, including:</p> +<ul> +<li>Added positioning utilities: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> with <code>0</code>, <code>50%</code>, and <code>100%</code> values</li> +<li>Added <code>.d-grid</code> option, along with new <code>gap</code> utilities for easy grid layouts</li> +<li>Added <code>.fs</code> utilities for <code>font-size</code></li> +<li>Renamed <code>font-weight</code> utilities to <code>.fw</code></li> +<li>Added <code>.rounded-1</code>, <code>.rounded-2</code>, and <code>.rounded-3</code> for new small, medium, and large <code>border-radius</code> utilities</li> +<li>Added <code>.overflow-visible</code> and <code>.overflow-scroll</code> utilities</li> +</ul> +<p>Check out the <a href="https://getbootstrap.com/docs/5.0/migration/">Migration guide</a> and <a href="https://getbootstrap.com/docs/5.0/utilities/">utilities documentation</a> for more details.</p> +<h3 id="logical-properties-for-spacing-utilities">Logical properties for spacing utilities</h3> +<p>Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and <strong>have renamed several classes and variables</strong>. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!</p> +<p>Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. Things like <code>align-items-end</code> have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.</p> +<p>For example, in a LTR context, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>. Be sure to <a href="https://getbootstrap.com/docs/5.0/migration/#rtl">read the RTL Migration guide</a> for a full list of renamed classes and variables.</p> +<h2 id="new-snippet-examples">New snippet examples</h2> +<p><a href="https://getbootstrap.com/docs/5.0/examples/"><img src="/assets/img/2021/03/bootstrap-new-examples.png" class="d-block img-fluid mb-2 rounded border" alt="New examples" loading="lazy" width="3360" height="2100"> +</a></p> +<p>We’ve added four brand new snippet-heavy examples and refreshed a few other examples while we were at it. These new snippet examples feature several variations of common components, served up in different ways for you to easily copy and paste.</p> +<ul> +<li><a href="https://getbootstrap.com/docs/5.0/examples/headers/">Headers</a></li> +<li><a href="https://getbootstrap.com/docs/5.0/examples/heroes/">Heroes</a></li> +<li><a href="https://getbootstrap.com/docs/5.0/examples/features/">Features</a></li> +<li><a href="https://getbootstrap.com/docs/5.0/examples/sidebars/">Sidebars</a></li> +</ul> +<p>These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.</p> +<p><a href="https://getbootstrap.com/docs/5.0/examples/starter-template/"><img src="/assets/img/2021/03/starter-template.png" class="d-block img-fluid mb-2 rounded border" alt="New starter example" loading="lazy" width="3584" height="2240"> +</a></p> +<p>We’ve also updated our <a href="https://getbootstrap.com/docs/5.0/examples/starter-template/">starter template</a> with a refreshed design and more resources.</p> +<h2 id="grid-and-layout">Grid and layout</h2> +<p>Our grid system and layout options saw some changes to streamline and improve things, namely:</p> +<ul> +<li>Column classes can now be used as <code>width</code> utilities (e.g., <code>.col-6</code> is <code>width: 50%</code>) as <code>padding</code> is no longer applied outside a <code>.row</code>.</li> +<li>New gutter utilities can responsively customize horizontal and vertical grid gutters. The gutter width has also been reduced to <code>1.5rem</code>.</li> +<li>Removed <code>position: relative</code> from column classes</li> +<li>Dropped the <code>.media</code> component for utilities</li> +</ul> +<p>We also updated our layout documentation to break apart the exceptionally long pages into more focused topics. We’ve also added a clarified explanation of breakpoints, containers, and more.</p> +<p>Check out the <a href="https://getbootstrap.com/docs/5.0/migration/">Migration guide</a> and <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/">layout documentation</a> for more details.</p> +<h2 id="more-component-updates">More component updates</h2> +<p>Across the board we’ve made a number of other enhancements and changes to key components:</p> +<ul> +<li>We’ve overhauled the JavaScript and positioning for our dropdowns as part of our adoption of Popper 2. You can see <a href="https://getbootstrap.com/docs/5.0/components/dropdowns/#alignment-options">all the options in a new example in our docs</a> and new CSS selectors and data attributes used to position them.</li> +<li>Dropdown menus now have a new <code>.dropdown-menu-dark</code> modifier class.</li> +<li>Similarly, carousels now have a new <code>.carousel-dark</code> modifier class to invert the controls, text, and indicators.</li> +<li>Added <a href="https://getbootstrap.com/docs/5.0/components/alerts/#icons">icon examples to our Alert component</a> for adding Bootstrap Icons (or other icon libraries) using utilities</li> +<li>Our close button has been redesigned with an SVG <code>background-image</code> and improved cross-browser styling.</li> +<li>We’ve dropped the <code>.btn-block</code> class for utilities.</li> +<li>We’ve updated navbars with a new <code>.navbar-nav-scroll</code> for vertical <code>max-height</code> and scrolling of when a collapsed navbar is opened</li> +<li>List groups have a <a href="https://getbootstrap.com/docs/5.0/components/list-group/#numbered">new <code>.list-group-numbered</code> modifier class</a> that uses pseudo-elements to create numbered list group items.</li> +</ul> +<h2 id="improved-customizing">Improved customizing</h2> +<p>We’ve hunkered down and improved our documentation in several places, giving more explanation, removing ambiguity, and providing much more support for extending Bootstrap. It all starts with a whole <a href="https://v5.getbootstrap.com/docs/5.0/customize/overview/">new Customize section</a>.</p> +<p><img src="/assets/img/2020/06/v5-customize.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 5 customize docs" loading="lazy" width="1500" height="1150"> +</p> +<p>v5’s Customize docs expand on v4’s Theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. We’ve fleshed out more content here and even provided a <a href="https://github.com/twbs/bootstrap-npm-starter">starter npm project</a> for you to get started with faster and easier. It’s also available as a template repo on GitHub, so you can freely fork and go.</p> +<p><img src="/assets/img/2020/06/v5-color-palette.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap 5 color palette" loading="lazy" width="1774" height="552"> +</p> +<p>We’ve expanded our color palette in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without ever leaving the codebase. We’ve also done some work to improve color contrast, and even provided color contrast metrics in our Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.</p> +<p><a href="https://getbootstrap.com/docs/5.0/components/alerts/#sass"><img src="/assets/img/2021/03/bootstrap-docs-sass.png" class="d-block img-fluid mb-2 rounded border" alt="New Sass docs" loading="lazy" width="3584" height="2240"> +</a></p> +<p>We’ve also added new sections to most of our pages to document the source Sass code that powers each component. Variables, mixins, loops, and maps are all rendered and kept up to date in each page, making it easier to reference and customize values as you build.</p> +<h2 id="dart-sass">Dart Sass</h2> +<p>We’ve switched to Dart Sass with LibSass being deprecated. We’ve been testing our builds with Dart Sass for a while and decided to make the switch with LibSass being deprecated just a couple of weeks ago. We’re holding on to the Sass modules for now. We’re still not using the new module system for compatibility concerns and a greater gap for folks upgrading from v4.</p> +<h2 id="browser-support">Browser support</h2> +<p>We’ve dropped a ton of older browsers in this update, making it one of our biggest leaps in a while:</p> +<ul> +<li>Dropped Microsoft Edge Legacy</li> +<li>Dropped Internet Explorer 10 and 11</li> +<li>Dropped Firefox < 60</li> +<li>Dropped Safari < 10</li> +<li>Dropped iOS Safari < 10</li> +<li>Dropped Chrome < 60</li> +<li>Dropped Android < 6</li> +</ul> +<p>You can find the full browser and device support in our <code>.browserslistrc</code>.</p> +<h2 id="javascript">JavaScript</h2> +<p>The biggest change to our JavaScript has been the removal of jQuery, but we’ve also made a number of enhancements beyond that as well.</p> +<ul> +<li>No more jQuery!</li> +<li>All plugins can now accept a CSS selector as the first argument.</li> +<li>Updated to Popper 2!</li> +<li>Data attributes for all JavaScript plugins are now namespaced with <code>bs</code>. For example, we use data-bs-toggle instead of data-toggle.</li> +<li>We overhauled dropdown, popover, and tooltip placement with the arrival of Popper v2.</li> +<li>Toast positioning was also overhauled and now leverages our new position utilities.</li> +<li>Added ability to use custom classes for tooltips and popovers.</li> +<li>Made various optimizations to better share code across components.</li> +<li>Changed dropdowns to emit events on <code>.dropdown-toggle</code> instead of <code>.dropdown</code>.</li> +<li>Removed underscore from public static methods like <code>_getInstance()</code> to <code>getInstance()</code>.</li> +<li>Renamed <code>whiteList</code> to <code>allowList</code> in popovers and tooltips`</li> +</ul> +<h2 id="migration-guide">Migration guide</h2> +<p>We’ve updated our <a href="https://getbootstrap.com/docs/5.0/migration/">migration guide page</a> to consolidate all our changes across the six pre-releases into a single set of changes. We’ve condensed much of the content this way and added <span class="badge bg-danger text-white">Breaking change</span> labels throughout to help draw you attention to potential gotchas while upgrading.</p> +<p>We still think there’s more to do here—including tutorial-like guidance on the code changes, diffs and code snippets for our dependencies, etc. If you have suggestions or want to contribute, please open an issue or pull request.</p> +<hr class="my-5"> +<p>Head to GitHub for a complete <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F27">list of issues and pull requests in v5.0.0</a>. You can also review the <a href="https://github.com/twbs/bootstrap/projects/27">v5.0.0 project board</a>, too.</p> +<h2 id="get-the-release">Get the release</h2> +<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this update as our new latest release on npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0">Review the GitHub v5.0.0 release changelog</a> for a complete list of changes since our last pre-release.</p> +<h2 id="whats-next">What’s next</h2> +<p>Looking ahead, we have some other releases on the horizon:</p> +<ul> +<li><a href="https://github.com/twbs/bootstrap/projects/35">Bootstrap v4.6.1</a></li> +<li><a href="https://icons.getbootstrap.com">Bootstrap Icons</a> v1.5.0</li> +<li><a href="https://github.com/twbs/bootstrap-npm-starter">Bootstrap npm starter</a> v2.0.0 with support for Bootstrap 5</li> +<li><a href="https://github.com/twbs/bootstrap/projects/38">Bootstrap v5.0.1</a> for follow-up bug fixes from our initial release</li> +<li><a href="https://github.com/twbs/bootstrap/projects/31">Bootstrap v5.1.0</a> for our first minor feature release</li> +</ul> +<p>Feel free to open issues or pull requests if you have any additional ideas for upcoming releases!</p> +<h2 id="v510-preview">v5.1.0 preview</h2> +<p>While we were polishing up this release, we also had our eyes towards the future to ship a few minor releases. Here’s a quick look at what’s coming in our next minor release, <a href="https://github.com/twbs/bootstrap/projects/31">v5.1.0</a>:</p> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/31813">Opt-in CSS Grid support</a></li> +<li><a href="https://github.com/twbs/bootstrap/pull/32319">Expanded Sass maps for color palette</a></li> +<li><a href="https://github.com/twbs/bootstrap/pull/31859">New skeleton placeholder component</a></li> +<li><a href="https://github.com/twbs/bootstrap/pull/33781">New opacity utilities</a></li> +<li>and more!</li> +</ul> +<p>And more features and updates are planned for a few more releases after that! Check out our <a href="https://github.com/twbs/bootstrap/projects">projects on GitHub</a> for a closer look.</p> +<h2 id="support-the-team">Support the team</h2> +<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2021/03/29/bootstrap-icons-1-4-1/" class="text-decoration-none"> Bootstrap Icons v1.4.1 </a> @@ -212,7 +512,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="29 Mar 21 21:30 UTC"> @@ -225,7 +525,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/zO6D_BAuYCI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/zO6D_BAuYCI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -502,165 +802,6 @@ <h2 id="support-the-team">Support the team</h2> <p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2021/01/19/bootstrap-4.6.0/" class="text-decoration-none"> - Bootstrap v4.6.0 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="19 Jan 21 21:30 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - January 19, 2021 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/LuN6gs0AJls?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap v4.6.0 is here with a couple new features, several bugfixes, and some awesome documentation updates to make v4 more maintainable alongside our development of v5.</p> -<p>Read on for the highlighted changes or <a href="https://getbootstrap.com/docs/4.6/">head to the v4.6 docs</a> to see the latest in action.</p> -<h2 id="hugo">Hugo!</h2> -<p>The biggest change in v4.6.0 is under the hood—we’ve overhauled our development environment to match that of v5. Our v4.x docs are now powered by <a href="https://gohugo.io">Hugo</a>. That means no more Ruby dependency for v4.x, improved maintainability between major versions, faster development, and incredibly fast build times compared to Jekyll.</p> -<h2 id="changes">Changes</h2> -<p>Also available in the <a href="https://github.com/twbs/bootstrap/releases/tag/v4.6.0">v4.6.0 release on GitHub</a>.</p> -<h3 id="highlights">Highlights</h3> -<ul> -<li>Tooltips and popovers can have custom classes via <code>customClass</code> option.</li> -<li>Added new <code>.navbar-nav-scroll</code> class for scrolling expanded navbar contents on mobile devices.</li> -<li>For improved accessibiliy, spinners now slow down when <code>prefers-reduced-motion</code> is enabled.</li> -<li>v4.x docs are now built on Hugo for easier maintenance and backports from v5.x.</li> -<li>Darkened <code>background-color</code> of <code>.dropdown-item</code> for improved hover state contrast, and ligthened the disabled <code>.dropdown-item</code> <code>color</code>.</li> -<li>Improved alignment of form validation tooltips.</li> -<li>File inputs no longer extend beyond their containers.</li> -</ul> -<h3 id="css">CSS</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/31557">#31557</a>: Fix form validation tooltip alignment</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31657">#31657</a>: Handle the Ubuntu sans-serif case</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31700">#31700</a>: Suppress flexbox side effects in breadcrumb</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31882">#31882</a>: Slow down spinners when prefers-reduced-motion</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31886">#31886</a>: Fixed: Undefined mixin “deprecate” when importing “bootstrap-grid-scss”</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32141">#32141</a>: Use correct value order</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32145">#32145</a>: Avoid invisible real file input “spilling” out of container</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32160">#32160</a>: Add overflow suppression to custom file label</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32211">#32211</a>: Move negative margin-bottom from .nav-item to .nav-link</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32212">#32212</a>: Remove needless Stylelint disables</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32833">#32833</a>: Add <code>.navbar-nav-scroll</code> for vertical scrolling of navbar content</li> -<li>Add two new variables for pagination border-radius values; backport of <a href="https://github.com/twbs/bootstrap/pull/32423">#32423</a></li> -<li>Remove old/unnecessary reboot bug fix; backport of <a href="https://github.com/twbs/bootstrap/pull/32631">#32631</a></li> -<li>Suppress focus outline for buttons when it shouldn’t be visible in Chromium; backport of <a href="https://github.com/twbs/bootstrap/pull/32689">#32689</a></li> -<li>Consistently use <code>outline:0</code> rather than <code>outline:none</code>; backport of <a href="https://github.com/twbs/bootstrap/pull/32751">#32751</a></li> -<li>Darken dropdown item hover style; backport of <a href="https://github.com/twbs/bootstrap/pull/32754">#32754</a></li> -<li>Lighten disabled dropdown text to <code>$gray-500</code></li> -</ul> -<h3 id="js">JS</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/31820">#31820</a>: Check for data-interval on the first slide of carousel</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31834">#31834</a>/<a href="https://github.com/twbs/bootstrap/pull/32225">#32225</a>: tooltip/popover: add a <code>customClass</code> option</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32001">#32001</a>: Move <code>js/src/index.js</code> one folder up</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32045">#32045</a>: tests: fix sanitizer test</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32220">#32220</a>: Don’t hide modal when <code>config.keyboard</code> is false</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32312">#32312</a>: build-plugins: switch to “bundled” for babel helpers</li> -</ul> -<h3 id="docs">Docs</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/31861">#31861</a>: Split up dropdown sizing docs to improve rendering</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31892">#31892</a>: Remove redundant visually hidden “(current)” from pagination controls</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31893">#31893</a>: manifest.json: Switch to relative URLs so that we don’t need to change the path with every major/minor release</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31898">#31898</a>: switch to suggesting jsDelivr as a CDN</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31904">#31904</a>: -<ul> -<li>docs(forms): use a legend for fieldset instead of aria-label</li> -<li>docs(forms): fix incorrect legend nesting in fieldset</li> -</ul> -</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31936">#31936</a>: forms: change inline custom radio name</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31951">#31951</a>: Update anchor-js to v4.3.0</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31960">#31960</a>: Explicitly mention emoji fonts, tweak sentence in typography</li> -<li><a href="https://github.com/twbs/bootstrap/pull/31981">#31981</a>: list-group.md: fix snippet</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32005">#32005</a>: Remove <code>bugreport.apple.com</code> since it doesn’t work</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32015">#32015</a>: Fix redirects</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32050">#32050</a>: Make docs anchorjs links darker on keyboard focus</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32054">#32054</a>: Add callouts about using light colors ideally on a dark background</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32077">#32077</a>: Switch to Hugo</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32083">#32083</a>: mention “Liberation Sans”</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32087">#32087</a>: download.md: link to JS files comparison too</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32094">#32094</a>: Changes to navbar documentation/explanation</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32106">#32106</a>: Clarify JS bundle docs once more for v4</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32137">#32137</a>: input-group.md: fix wrong class <code>.visually-hidden</code></li> -<li><a href="https://github.com/twbs/bootstrap/pull/32138">#32138</a>: navbar.md: remove <code>loading=lazy</code> from snippets</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32147">#32147</a>: Fix caniuse.com redirects</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32151">#32151</a>: Mention user-select-all support in docs</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32196">#32196</a>: homepage: split snippets and show copy buttons</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32203">#32203</a>: Switch to jsDelivr for the remaining docs assets</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32223">#32223</a>: introduction: split comments</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32247">#32247</a>: Fix typos in tooltip/popover docs</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32253">#32253</a>: Add Russian translation</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32363">#32363</a>: Remove useless <code>.text-left</code> in Layout / Overview</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32399">#32399</a>: Remove duplicated “follow Bootstrap on Twitter” link in Community section</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32457">#32457</a>: Add mention of the bs-custom-file-input plugin needed for the custom file input</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32461">#32461</a>: style clipboard button on <code>:focus</code>, not just <code>:hover</code></li> -<li><a href="https://github.com/twbs/bootstrap/pull/32462">#32462</a>: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32634">#32634</a>: Remove incorrect mention of dropdowns for dynamic tab behavior</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32639">#32639</a>: v4: Add an actual <code>data-touch="false"</code> example in the carousel docs</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32728">#32728</a>: add v5.0 in versions</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32761">#32761</a>: Mention stretched-link constraints with table elements</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32789">#32789</a>: Remove <code>role="button"</code> from CTA links in carousel example</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32791">#32791</a>: Docs v4: Sass implementation and rounding precision</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32809">#32809</a>: -<ul> -<li>Clarify Sass import and customize docs for how to modify variable defaults</li> -<li>Add an npm starter project callout to a few pages</li> -</ul> -</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32827">#32827</a>: Add a live toast example to the docs</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32759">#32759</a>: Mention CSP and embedded SVGs in v4 docs</li> -<li>docs(dropdowns): clarify where is <code>.show</code> applied</li> -<li>Require <code>.has-validation</code> for input groups with validation</li> -<li>Fix mobile menu jump & double border</li> -<li>Remove double spaces from homepage SVGs</li> -<li>browserconfig.xml: switch to relative image path</li> -<li>Tweak the wording for collapse to indicate button is preferred/more semantic; backport of <a href="https://github.com/twbs/bootstrap/pull/32632">#32632</a></li> -<li>Clarify the <code>$enable-shadows</code> option in our docs; backport of <a href="https://github.com/twbs/bootstrap/pull/32685">#32685</a></li> -</ul> -<h3 id="examples">Examples</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/31979">#31979</a>: v4 Examples/Floating-labels: fix bad behavior with autofill</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32198">#32198</a>: examples: add the version number in <code>title</code></li> -</ul> -<h3 id="misc">Misc</h3> -<ul> -<li><a href="https://github.com/twbs/bootstrap/pull/29753">#29753</a>: Improve build/generate-sri.js regex</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32003">#32003</a>: CI: switch to Node.js 14</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32008">#32008</a>: Update Edge’s Rendering Engine on CONTRIBUTING.md</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32486">#32486</a>: BrowserStack: test on macOS Catalina instead of High Sierra</li> -<li><a href="https://github.com/twbs/bootstrap/pull/32756">#32756</a>: Stylelint: disallow some property values</li> -<li><strong>Fix for npm 7.x</strong> package.json: move <code>version_short</code> variable under the <code>config</code> object; backport of <a href="https://github.com/twbs/bootstrap/pull/32737">#32737</a></li> -<li>Update build-examples script so that the resulting examples zip file includes only the needed files</li> -<li>Various CI tweaks</li> -<li>Updated devDependencies</li> -</ul> -<h2 id="next-up">Next up</h2> -<p>Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.</p> -<p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</p> -<h2 id="support-the-team">Support the team</h2> -<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div> </div> diff --git a/page/6/index.html b/page/6/index.html index 1795476e..fd340d7c 100644 --- a/page/6/index.html +++ b/page/6/index.html @@ -203,6 +203,165 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2021/01/19/bootstrap-4.6.0/" class="text-decoration-none"> + Bootstrap v4.6.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="19 Jan 21 21:30 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + January 19, 2021 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/LuN6gs0AJls?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>Bootstrap v4.6.0 is here with a couple new features, several bugfixes, and some awesome documentation updates to make v4 more maintainable alongside our development of v5.</p> +<p>Read on for the highlighted changes or <a href="https://getbootstrap.com/docs/4.6/">head to the v4.6 docs</a> to see the latest in action.</p> +<h2 id="hugo">Hugo!</h2> +<p>The biggest change in v4.6.0 is under the hood—we’ve overhauled our development environment to match that of v5. Our v4.x docs are now powered by <a href="https://gohugo.io">Hugo</a>. That means no more Ruby dependency for v4.x, improved maintainability between major versions, faster development, and incredibly fast build times compared to Jekyll.</p> +<h2 id="changes">Changes</h2> +<p>Also available in the <a href="https://github.com/twbs/bootstrap/releases/tag/v4.6.0">v4.6.0 release on GitHub</a>.</p> +<h3 id="highlights">Highlights</h3> +<ul> +<li>Tooltips and popovers can have custom classes via <code>customClass</code> option.</li> +<li>Added new <code>.navbar-nav-scroll</code> class for scrolling expanded navbar contents on mobile devices.</li> +<li>For improved accessibiliy, spinners now slow down when <code>prefers-reduced-motion</code> is enabled.</li> +<li>v4.x docs are now built on Hugo for easier maintenance and backports from v5.x.</li> +<li>Darkened <code>background-color</code> of <code>.dropdown-item</code> for improved hover state contrast, and ligthened the disabled <code>.dropdown-item</code> <code>color</code>.</li> +<li>Improved alignment of form validation tooltips.</li> +<li>File inputs no longer extend beyond their containers.</li> +</ul> +<h3 id="css">CSS</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/31557">#31557</a>: Fix form validation tooltip alignment</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31657">#31657</a>: Handle the Ubuntu sans-serif case</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31700">#31700</a>: Suppress flexbox side effects in breadcrumb</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31882">#31882</a>: Slow down spinners when prefers-reduced-motion</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31886">#31886</a>: Fixed: Undefined mixin “deprecate” when importing “bootstrap-grid-scss”</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32141">#32141</a>: Use correct value order</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32145">#32145</a>: Avoid invisible real file input “spilling” out of container</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32160">#32160</a>: Add overflow suppression to custom file label</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32211">#32211</a>: Move negative margin-bottom from .nav-item to .nav-link</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32212">#32212</a>: Remove needless Stylelint disables</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32833">#32833</a>: Add <code>.navbar-nav-scroll</code> for vertical scrolling of navbar content</li> +<li>Add two new variables for pagination border-radius values; backport of <a href="https://github.com/twbs/bootstrap/pull/32423">#32423</a></li> +<li>Remove old/unnecessary reboot bug fix; backport of <a href="https://github.com/twbs/bootstrap/pull/32631">#32631</a></li> +<li>Suppress focus outline for buttons when it shouldn’t be visible in Chromium; backport of <a href="https://github.com/twbs/bootstrap/pull/32689">#32689</a></li> +<li>Consistently use <code>outline:0</code> rather than <code>outline:none</code>; backport of <a href="https://github.com/twbs/bootstrap/pull/32751">#32751</a></li> +<li>Darken dropdown item hover style; backport of <a href="https://github.com/twbs/bootstrap/pull/32754">#32754</a></li> +<li>Lighten disabled dropdown text to <code>$gray-500</code></li> +</ul> +<h3 id="js">JS</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/31820">#31820</a>: Check for data-interval on the first slide of carousel</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31834">#31834</a>/<a href="https://github.com/twbs/bootstrap/pull/32225">#32225</a>: tooltip/popover: add a <code>customClass</code> option</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32001">#32001</a>: Move <code>js/src/index.js</code> one folder up</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32045">#32045</a>: tests: fix sanitizer test</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32220">#32220</a>: Don’t hide modal when <code>config.keyboard</code> is false</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32312">#32312</a>: build-plugins: switch to “bundled” for babel helpers</li> +</ul> +<h3 id="docs">Docs</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/31861">#31861</a>: Split up dropdown sizing docs to improve rendering</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31892">#31892</a>: Remove redundant visually hidden “(current)” from pagination controls</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31893">#31893</a>: manifest.json: Switch to relative URLs so that we don’t need to change the path with every major/minor release</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31898">#31898</a>: switch to suggesting jsDelivr as a CDN</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31904">#31904</a>: +<ul> +<li>docs(forms): use a legend for fieldset instead of aria-label</li> +<li>docs(forms): fix incorrect legend nesting in fieldset</li> +</ul> +</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31936">#31936</a>: forms: change inline custom radio name</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31951">#31951</a>: Update anchor-js to v4.3.0</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31960">#31960</a>: Explicitly mention emoji fonts, tweak sentence in typography</li> +<li><a href="https://github.com/twbs/bootstrap/pull/31981">#31981</a>: list-group.md: fix snippet</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32005">#32005</a>: Remove <code>bugreport.apple.com</code> since it doesn’t work</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32015">#32015</a>: Fix redirects</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32050">#32050</a>: Make docs anchorjs links darker on keyboard focus</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32054">#32054</a>: Add callouts about using light colors ideally on a dark background</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32077">#32077</a>: Switch to Hugo</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32083">#32083</a>: mention “Liberation Sans”</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32087">#32087</a>: download.md: link to JS files comparison too</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32094">#32094</a>: Changes to navbar documentation/explanation</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32106">#32106</a>: Clarify JS bundle docs once more for v4</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32137">#32137</a>: input-group.md: fix wrong class <code>.visually-hidden</code></li> +<li><a href="https://github.com/twbs/bootstrap/pull/32138">#32138</a>: navbar.md: remove <code>loading=lazy</code> from snippets</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32147">#32147</a>: Fix caniuse.com redirects</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32151">#32151</a>: Mention user-select-all support in docs</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32196">#32196</a>: homepage: split snippets and show copy buttons</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32203">#32203</a>: Switch to jsDelivr for the remaining docs assets</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32223">#32223</a>: introduction: split comments</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32247">#32247</a>: Fix typos in tooltip/popover docs</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32253">#32253</a>: Add Russian translation</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32363">#32363</a>: Remove useless <code>.text-left</code> in Layout / Overview</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32399">#32399</a>: Remove duplicated “follow Bootstrap on Twitter” link in Community section</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32457">#32457</a>: Add mention of the bs-custom-file-input plugin needed for the custom file input</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32461">#32461</a>: style clipboard button on <code>:focus</code>, not just <code>:hover</code></li> +<li><a href="https://github.com/twbs/bootstrap/pull/32462">#32462</a>: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32634">#32634</a>: Remove incorrect mention of dropdowns for dynamic tab behavior</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32639">#32639</a>: v4: Add an actual <code>data-touch="false"</code> example in the carousel docs</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32728">#32728</a>: add v5.0 in versions</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32761">#32761</a>: Mention stretched-link constraints with table elements</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32789">#32789</a>: Remove <code>role="button"</code> from CTA links in carousel example</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32791">#32791</a>: Docs v4: Sass implementation and rounding precision</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32809">#32809</a>: +<ul> +<li>Clarify Sass import and customize docs for how to modify variable defaults</li> +<li>Add an npm starter project callout to a few pages</li> +</ul> +</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32827">#32827</a>: Add a live toast example to the docs</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32759">#32759</a>: Mention CSP and embedded SVGs in v4 docs</li> +<li>docs(dropdowns): clarify where is <code>.show</code> applied</li> +<li>Require <code>.has-validation</code> for input groups with validation</li> +<li>Fix mobile menu jump & double border</li> +<li>Remove double spaces from homepage SVGs</li> +<li>browserconfig.xml: switch to relative image path</li> +<li>Tweak the wording for collapse to indicate button is preferred/more semantic; backport of <a href="https://github.com/twbs/bootstrap/pull/32632">#32632</a></li> +<li>Clarify the <code>$enable-shadows</code> option in our docs; backport of <a href="https://github.com/twbs/bootstrap/pull/32685">#32685</a></li> +</ul> +<h3 id="examples">Examples</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/31979">#31979</a>: v4 Examples/Floating-labels: fix bad behavior with autofill</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32198">#32198</a>: examples: add the version number in <code>title</code></li> +</ul> +<h3 id="misc">Misc</h3> +<ul> +<li><a href="https://github.com/twbs/bootstrap/pull/29753">#29753</a>: Improve build/generate-sri.js regex</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32003">#32003</a>: CI: switch to Node.js 14</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32008">#32008</a>: Update Edge’s Rendering Engine on CONTRIBUTING.md</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32486">#32486</a>: BrowserStack: test on macOS Catalina instead of High Sierra</li> +<li><a href="https://github.com/twbs/bootstrap/pull/32756">#32756</a>: Stylelint: disallow some property values</li> +<li><strong>Fix for npm 7.x</strong> package.json: move <code>version_short</code> variable under the <code>config</code> object; backport of <a href="https://github.com/twbs/bootstrap/pull/32737">#32737</a></li> +<li>Update build-examples script so that the resulting examples zip file includes only the needed files</li> +<li>Various CI tweaks</li> +<li>Updated devDependencies</li> +</ul> +<h2 id="next-up">Next up</h2> +<p>Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.</p> +<p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</p> +<h2 id="support-the-team">Support the team</h2> +<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2021/01/07/bootstrap-icons-1-3-0/" class="text-decoration-none"> Bootstrap Icons v1.3.0 </a> @@ -212,7 +371,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="07 Jan 21 21:30 UTC"> @@ -225,7 +384,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/a01QQZyl-_I?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/a01QQZyl-_I?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -436,155 +595,6 @@ <h2 id="figma">Figma</h2> <p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/JeBqM2fRcfIe7wMDgNZG6d/Bootstrap-Icons-v1.2.0?node-id=0%3A1">icons from Figma</a>.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2020/12/07/bootstrap-5-beta-1/" class="text-decoration-none"> - Bootstrap 5 Beta 1 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="07 Dec 20 11:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - December 07, 2020 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/y2bVIBwpCTA?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo!</p> -<p>Just like with the v4 development process, our docs for v5 have been temporarily hosted on a subdomain for the next major release. Starting today, those docs are being moved to the main domain and our old <code>v5.getbootstrap.com</code> domain will redirect.</p> -<p>There are some really awesome new features—RTL!—that have been added in this release, and they’ve come with some important changes. Keep reading for the lowdown and let us know what you think!</p> -<h2 id="rtl">RTL</h2> -<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/"><img src="/assets/img/2020/12/rtl-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap RTL docs" loading="lazy" width="1280" height="800"> -</a></p> -<p>Our biggest addition to the project in years, we’ve finally added RTL support to Bootstrap! Please join me in giving @ffoodd—one of our newest contributors and author of the RTL pull request—a massive thank you. <a href="https://github.com/twbs/bootstrap/pull/30980">The pull request</a> includes nearly 50 references to existing issues and PRs that have tried to implement the feature into our core.</p> -<p>At a high level, our RTL approach includes a handful of changes:</p> -<ul> -<li> -<p><strong>New RTL versions of our CSS dist file</strong>, which includes our grid, Reboot, utilities, and standard bundles. <a href="https://getbootstrap.com/docs/5.0/getting-started/contents/">See the Contents page for a full list of files.</a></p> -</li> -<li> -<p><strong><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">New RTL documentation</a></strong> to help you get started.</p> -</li> -<li> -<p><strong><a href="https://getbootstrap.com/docs/5.0/examples/#rtl">Five new RTL Examples</a></strong> that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all new right-to-left equivalents.</p> -</li> -<li> -<p><strong>Two new cheatsheet kitchen sink pages</strong>—the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">default cheatsheet</a> for our standard CSS and the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">RTL cheatsheet</a>.</p> -</li> -</ul> -<p>Our approach is built on <a href="https://rtlcss.com/">RTLCSS</a>, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.</p> -<p><a href="https://github.com/twbs/bootstrap/issues/32330">This issue</a> has some outstanding todos already planned for our team to address. See something else we can improve? Please consider opening an issue or pull request.</p> -<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">Read up on RTL in Bootstrap in our docs</a>, including required HTML changes, a starter template, details on our approach, and more.</p> -<h2 id="renamed-classes-for-logical-properties">Renamed classes for logical properties</h2> -<p>Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and <strong>have renamed several classes and variables</strong>. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!</p> -<p>Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. Things like <code>align-items-end</code> have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.</p> -<p>For example, in a LTR context, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>. Be sure to <a href="https://getbootstrap.com/docs/5.0/migration/#rtl">read the RTL Migration guide</a> for a full list of renamed classes and variables.</p> -<h2 id="popperjs-v2">Popper.js v2</h2> -<p><img src="/assets/img/2020/12/popper-header.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1520" height="834"> -</p> -<p>We’ve upgraded <a href="https://popper.js.org">Popper.js</a> from v1.x to v2.x, bringing with it some small breaking changes to our tooltips and popovers. These two changes are why we haven’t been able to update to v2.x sooner.</p> -<ul> -<li>Removed <code>offset</code> option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the <code>popperConfig</code> parameter.</li> -<li>The <code>fallbackPlacement</code> option has become <code>fallbackPlacements</code>.</li> -</ul> -<p>Popper.js v2 also comes with a smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.</p> -<h2 id="namespaced-data-attributes">Namespaced data attributes</h2> -<p>We’ve renamed all our <code>data</code> attributes to include <code>bs</code> as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. <a href="https://github.com/twbs/bootstrap/pull/31827">See #31827</a> for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.</p> -<p>Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed <code>data-bs-toggle</code> attribute.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> Dropdown button -</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> -</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> -</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> -</span></span></code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> -<p><img src="/assets/img/2020/12/toast-position-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1556" height="752"> -</p> -<p>After dabbling in some JavaScript solutions to <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">positioning toasts</a>, we’ve landed on a new CSS-only approach thanks to our <a href="https://getbootstrap.com/docs/5.0/utilities/position/">new positioning utilities</a>. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.</p> -<p>Our docs have been updated to include a <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">new position preview picker</a>, too, so you can see them in action. <a href="https://github.com/twbs/bootstrap/pull/32280/">See the pull request for more details.</a></p> -<h2 id="js-enhancements">JS enhancements</h2> -<p>Beyond the namespacing, we’ve been chipping away at a few other JavaScript improvements and bug fixes. Here’s a rundown of what’s new:</p> -<ul> -<li>Created a new base component to share logic across our components. <a href="https://github.com/twbs/bootstrap/pull/29370">See #29370.</a></li> -<li>Migrate to more modern APIs across our plugins. <a href="https://github.com/twbs/bootstrap/pull/32095">See #32095.</a></li> -<li>Tooltips and popovers can now have custom classes. <a href="https://github.com/twbs/bootstrap/pull/32217">See #32217.</a></li> -<li>Don’t hide modal when <code>config.keyboard</code> is false. <a href="https://github.com/twbs/bootstrap/pull/32179">See #32179.</a></li> -</ul> -<p>More JavaScript updates are coming soon, from performance and file-size improvements to new features.</p> -<h2 id="states-in-the-utilities-api">States in the utilities API</h2> -<p>One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the <code>state</code> option.</p> -<p>Use the <code>state</code> option to generate pseudo-class variations. Example pseudo-classes are <code>:hover</code> and <code>:focus</code>. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add <code>state: hover</code> and you’ll get <code>.opacity-hover:hover</code> in your compiled CSS.</p> -<p>Need multiple pseudo-classes? Use a space-separated list: <code>state: hover focus</code>.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> -</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span> -</span></span><span class="line"><span class="cl"> <span class="p">)</span> -</span></span><span class="line"><span class="cl"><span class="p">);</span> -</span></span></code></pre></div><p>Which outputs to:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> -</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> -</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> -</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> -</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> -</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> -<h2 id="and-more">And more…</h2> -<p>Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:</p> -<ul> -<li> -<p><strong>Breaking:</strong> Renamed <code>scale-color()</code> function to <code>shift-color()</code> . <a href="https://github.com/twbs/bootstrap/pull/32149">See #32149.</a></p> -</li> -<li> -<p><strong>Breaking:</strong> Simplified the <code>make-container()</code> mixin and <code>$container-padding-x</code>. <a href="https://github.com/twbs/bootstrap/pull/31735">See #31735.</a></p> -</li> -<li> -<p><strong>Fixed:</strong> Corners remain rounded now in vertical button groups. <a href="https://github.com/twbs/bootstrap/pull/31303">See #31303.</a></p> -</li> -<li> -<p><strong>Fixed:</strong> Removed default linear gradient on some table rows that caused undesirable performance. Still more work to do here FYI. <a href="https://github.com/twbs/bootstrap/pull/32277">See #32277.</a></p> -</li> -<li> -<p><strong>Updated:</strong> Breadcrumbs now have a simplified appearance. Use utilities to restore the <code>padding</code>, <code>background-color</code>, and <code>border-radius</code> as desired. <a href="https://github.com/twbs/bootstrap/pull/32249">See #32249.</a></p> -</li> -<li> -<p><strong>Updated:</strong> Finalized browserslist configuration to match our supported browsers. <a href="https://github.com/twbs/bootstrap/pull/30986">See #30986.</a></p> -</li> -</ul> -<p>For a more complete list of of changes, checkout the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F26+">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1">release</a>.</p> -<h2 id="get-started">Get started</h2> -<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next -</span></span></code></pre></div><h2 id="support-the-team">Support the team</h2> -<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div> </div> diff --git a/page/7/index.html b/page/7/index.html index fca20f43..200a7726 100644 --- a/page/7/index.html +++ b/page/7/index.html @@ -203,6 +203,155 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2020/12/07/bootstrap-5-beta-1/" class="text-decoration-none"> + Bootstrap 5 Beta 1 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="07 Dec 20 11:00 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + December 07, 2020 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/y2bVIBwpCTA?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo!</p> +<p>Just like with the v4 development process, our docs for v5 have been temporarily hosted on a subdomain for the next major release. Starting today, those docs are being moved to the main domain and our old <code>v5.getbootstrap.com</code> domain will redirect.</p> +<p>There are some really awesome new features—RTL!—that have been added in this release, and they’ve come with some important changes. Keep reading for the lowdown and let us know what you think!</p> +<h2 id="rtl">RTL</h2> +<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/"><img src="/assets/img/2020/12/rtl-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap RTL docs" loading="lazy" width="1280" height="800"> +</a></p> +<p>Our biggest addition to the project in years, we’ve finally added RTL support to Bootstrap! Please join me in giving @ffoodd—one of our newest contributors and author of the RTL pull request—a massive thank you. <a href="https://github.com/twbs/bootstrap/pull/30980">The pull request</a> includes nearly 50 references to existing issues and PRs that have tried to implement the feature into our core.</p> +<p>At a high level, our RTL approach includes a handful of changes:</p> +<ul> +<li> +<p><strong>New RTL versions of our CSS dist file</strong>, which includes our grid, Reboot, utilities, and standard bundles. <a href="https://getbootstrap.com/docs/5.0/getting-started/contents/">See the Contents page for a full list of files.</a></p> +</li> +<li> +<p><strong><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">New RTL documentation</a></strong> to help you get started.</p> +</li> +<li> +<p><strong><a href="https://getbootstrap.com/docs/5.0/examples/#rtl">Five new RTL Examples</a></strong> that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all new right-to-left equivalents.</p> +</li> +<li> +<p><strong>Two new cheatsheet kitchen sink pages</strong>—the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">default cheatsheet</a> for our standard CSS and the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">RTL cheatsheet</a>.</p> +</li> +</ul> +<p>Our approach is built on <a href="https://rtlcss.com/">RTLCSS</a>, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.</p> +<p><a href="https://github.com/twbs/bootstrap/issues/32330">This issue</a> has some outstanding todos already planned for our team to address. See something else we can improve? Please consider opening an issue or pull request.</p> +<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">Read up on RTL in Bootstrap in our docs</a>, including required HTML changes, a starter template, details on our approach, and more.</p> +<h2 id="renamed-classes-for-logical-properties">Renamed classes for logical properties</h2> +<p>Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and <strong>have renamed several classes and variables</strong>. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!</p> +<p>Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. Things like <code>align-items-end</code> have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.</p> +<p>For example, in a LTR context, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>. Be sure to <a href="https://getbootstrap.com/docs/5.0/migration/#rtl">read the RTL Migration guide</a> for a full list of renamed classes and variables.</p> +<h2 id="popperjs-v2">Popper.js v2</h2> +<p><img src="/assets/img/2020/12/popper-header.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1520" height="834"> +</p> +<p>We’ve upgraded <a href="https://popper.js.org">Popper.js</a> from v1.x to v2.x, bringing with it some small breaking changes to our tooltips and popovers. These two changes are why we haven’t been able to update to v2.x sooner.</p> +<ul> +<li>Removed <code>offset</code> option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the <code>popperConfig</code> parameter.</li> +<li>The <code>fallbackPlacement</code> option has become <code>fallbackPlacements</code>.</li> +</ul> +<p>Popper.js v2 also comes with a smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.</p> +<h2 id="namespaced-data-attributes">Namespaced data attributes</h2> +<p>We’ve renamed all our <code>data</code> attributes to include <code>bs</code> as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. <a href="https://github.com/twbs/bootstrap/pull/31827">See #31827</a> for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.</p> +<p>Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed <code>data-bs-toggle</code> attribute.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> Dropdown button +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span> +</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span> +</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span> +</span></span></code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2> +<p><img src="/assets/img/2020/12/toast-position-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1556" height="752"> +</p> +<p>After dabbling in some JavaScript solutions to <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">positioning toasts</a>, we’ve landed on a new CSS-only approach thanks to our <a href="https://getbootstrap.com/docs/5.0/utilities/position/">new positioning utilities</a>. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.</p> +<p>Our docs have been updated to include a <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">new position preview picker</a>, too, so you can see them in action. <a href="https://github.com/twbs/bootstrap/pull/32280/">See the pull request for more details.</a></p> +<h2 id="js-enhancements">JS enhancements</h2> +<p>Beyond the namespacing, we’ve been chipping away at a few other JavaScript improvements and bug fixes. Here’s a rundown of what’s new:</p> +<ul> +<li>Created a new base component to share logic across our components. <a href="https://github.com/twbs/bootstrap/pull/29370">See #29370.</a></li> +<li>Migrate to more modern APIs across our plugins. <a href="https://github.com/twbs/bootstrap/pull/32095">See #32095.</a></li> +<li>Tooltips and popovers can now have custom classes. <a href="https://github.com/twbs/bootstrap/pull/32217">See #32217.</a></li> +<li>Don’t hide modal when <code>config.keyboard</code> is false. <a href="https://github.com/twbs/bootstrap/pull/32179">See #32179.</a></li> +</ul> +<p>More JavaScript updates are coming soon, from performance and file-size improvements to new features.</p> +<h2 id="states-in-the-utilities-api">States in the utilities API</h2> +<p>One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the <code>state</code> option.</p> +<p>Use the <code>state</code> option to generate pseudo-class variations. Example pseudo-classes are <code>:hover</code> and <code>:focus</code>. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add <code>state: hover</code> and you’ll get <code>.opacity-hover:hover</code> in your compiled CSS.</p> +<p>Need multiple pseudo-classes? Use a space-separated list: <code>state: hover focus</code>.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span> +</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"> <span class="p">)</span> +</span></span><span class="line"><span class="cl"><span class="p">);</span> +</span></span></code></pre></div><p>Which outputs to:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span> +</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> +</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p> +<h2 id="and-more">And more…</h2> +<p>Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:</p> +<ul> +<li> +<p><strong>Breaking:</strong> Renamed <code>scale-color()</code> function to <code>shift-color()</code> . <a href="https://github.com/twbs/bootstrap/pull/32149">See #32149.</a></p> +</li> +<li> +<p><strong>Breaking:</strong> Simplified the <code>make-container()</code> mixin and <code>$container-padding-x</code>. <a href="https://github.com/twbs/bootstrap/pull/31735">See #31735.</a></p> +</li> +<li> +<p><strong>Fixed:</strong> Corners remain rounded now in vertical button groups. <a href="https://github.com/twbs/bootstrap/pull/31303">See #31303.</a></p> +</li> +<li> +<p><strong>Fixed:</strong> Removed default linear gradient on some table rows that caused undesirable performance. Still more work to do here FYI. <a href="https://github.com/twbs/bootstrap/pull/32277">See #32277.</a></p> +</li> +<li> +<p><strong>Updated:</strong> Breadcrumbs now have a simplified appearance. Use utilities to restore the <code>padding</code>, <code>background-color</code>, and <code>border-radius</code> as desired. <a href="https://github.com/twbs/bootstrap/pull/32249">See #32249.</a></p> +</li> +<li> +<p><strong>Updated:</strong> Finalized browserslist configuration to match our supported browsers. <a href="https://github.com/twbs/bootstrap/pull/30986">See #30986.</a></p> +</li> +</ul> +<p>For a more complete list of of changes, checkout the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F26+">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1">release</a>.</p> +<h2 id="get-started">Get started</h2> +<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@next +</span></span></code></pre></div><h2 id="support-the-team">Support the team</h2> +<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2020/11/11/bootstrap-5-alpha-3/" class="text-decoration-none"> Bootstrap 5 Alpha 3 </a> @@ -212,7 +361,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="11 Nov 20 11:00 UTC"> @@ -225,7 +374,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/god7hAPv8f0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/god7hAPv8f0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -564,54 +713,6 @@ </span></span></code></pre></div><h2 id="support-the-team">Support the team</h2> <p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2020/08/28/bootstrap-icons-stable/" class="text-decoration-none"> - Bootstrap Icons v1.0.0 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="28 Aug 20 21:30 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - August 28, 2020 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/azdwsXLmrHE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>After five alphas over the last nine months, Bootstrap Icons has officially gone stable with our v1.0.0 release! We’re now over 1,100 icons and are on track to add hundreds more in our upcoming minor releases. This has been a labor of love and I’m thrilled to ship this latest update.</p> -<p>Since our fifth alpha two months ago, over a third of our icons have been redrawn as we fine-tuned paths and shapes. Much of the redrawing and improvements here came as preparation for an icon font, but regrettably that’s been pushed back to a v1.1.0 release as the tooling for generating fonts from SVGs has proven more difficult to get right.</p> -<h2 id="1100-icons">1,100+ icons</h2> -<p>Our first alpha had just over 200 icons, and here we are with 1,120 icons in our first stable release. And we’ll only have more in future releases.</p> -<p><a href="https://icons.getbootstrap.com"><img src="/assets/img/2020/08/bootstrap-icons-v1.png" class="d-block img-fluid mb-2 rounded border" alt="All Bootstrap Icons" loading="lazy" width="1714" height="2048"> -</a></p> -<h2 id="usage">Usage</h2> -<p>If you’ve been following along these last several months, you’ll know Bootstrap icons are SVG based. That makes them super easy to import, customize, and extend—no matter the project. While they’re part of the Bootstrap family, they can be used anywhere. That’s because they’re released under the MIT license.</p> -<p>Use them as embedded SVGs, as external assets with <code><img></code> tags, as an SVG sprite, or even embedded in your CSS. <a href="https://icons.getbootstrap.com">Head to the docs to learn more.</a></p> -<h2 id="install">Install</h2> -<p>To get started, install via npm:</p> -<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons -</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> -<h2 id="figma">Figma</h2> -<p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/9YmlUAwhMv99G4yP4yN7Jy/Bootstrap-Icons-v1.0.0?node-id=0%3A1">icons from Figma</a>.</p> -<h2 id="up-next">Up next</h2> -<p>We’ll revisit the icon font hopefully in time for our next v1.1.0 release. In addition, there are already another 200+ icons drawn and plans for even more after. We’ll continue to fine-tune and iterate on these icons, so keep the feedback and requests coming.</p> - </div> </div> diff --git a/page/8/index.html b/page/8/index.html index 0ba83651..1f5034dc 100644 --- a/page/8/index.html +++ b/page/8/index.html @@ -203,6 +203,54 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2020/08/28/bootstrap-icons-stable/" class="text-decoration-none"> + Bootstrap Icons v1.0.0 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="28 Aug 20 21:30 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + August 28, 2020 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/azdwsXLmrHE?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>After five alphas over the last nine months, Bootstrap Icons has officially gone stable with our v1.0.0 release! We’re now over 1,100 icons and are on track to add hundreds more in our upcoming minor releases. This has been a labor of love and I’m thrilled to ship this latest update.</p> +<p>Since our fifth alpha two months ago, over a third of our icons have been redrawn as we fine-tuned paths and shapes. Much of the redrawing and improvements here came as preparation for an icon font, but regrettably that’s been pushed back to a v1.1.0 release as the tooling for generating fonts from SVGs has proven more difficult to get right.</p> +<h2 id="1100-icons">1,100+ icons</h2> +<p>Our first alpha had just over 200 icons, and here we are with 1,120 icons in our first stable release. And we’ll only have more in future releases.</p> +<p><a href="https://icons.getbootstrap.com"><img src="/assets/img/2020/08/bootstrap-icons-v1.png" class="d-block img-fluid mb-2 rounded border" alt="All Bootstrap Icons" loading="lazy" width="1714" height="2048"> +</a></p> +<h2 id="usage">Usage</h2> +<p>If you’ve been following along these last several months, you’ll know Bootstrap icons are SVG based. That makes them super easy to import, customize, and extend—no matter the project. While they’re part of the Bootstrap family, they can be used anywhere. That’s because they’re released under the MIT license.</p> +<p>Use them as embedded SVGs, as external assets with <code><img></code> tags, as an SVG sprite, or even embedded in your CSS. <a href="https://icons.getbootstrap.com">Head to the docs to learn more.</a></p> +<h2 id="install">Install</h2> +<p>To get started, install via npm:</p> +<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons +</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.0.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.0.0/bootstrap-icons-1.0.0.zip">download just the SVGs</a> (without the rest of the repository files).</p> +<h2 id="figma">Figma</h2> +<p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/9YmlUAwhMv99G4yP4yN7Jy/Bootstrap-Icons-v1.0.0?node-id=0%3A1">icons from Figma</a>.</p> +<h2 id="up-next">Up next</h2> +<p>We’ll revisit the icon font hopefully in time for our next v1.1.0 release. In addition, there are already another 200+ icons drawn and plans for even more after. We’ll continue to fine-tune and iterate on these icons, so keep the feedback and requests coming.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2020/08/06/bootstrap-4-5-2/" class="text-decoration-none"> Bootstrap 4.5.2 </a> @@ -212,7 +260,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="06 Aug 20 00:00 UTC"> @@ -225,7 +273,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/ccenFp_3kq8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/ccenFp_3kq8?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -570,45 +618,6 @@ <h2 id="support-the-team">Support the team</h2> <p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2020/05/21/bootstrap-icons-alpha4/" class="text-decoration-none"> - Bootstrap Icons Alpha 4 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="21 May 20 09:30 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - May 21, 2020 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/2ZBtPf7FOoM?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>We’re closing in on 700 icons in Bootstrap Icons with today’s release, Alpha 4! We’ve spent some time under the hood of our build process to improve a few things, added tons of new icons, and fixed some bugs and inconsistencies.</p> -<p>We’ve shipped tons of new commerce icons for all your shopping cart needs, added tons of calendar options (I couldn’t settle on one design), tons of new shape arrows, and more.</p> -<h2 id="700-icons">~700 icons!</h2> -<p>With 140 new icons in this release, we’ve almost hit 700 icons. We’re likely to fly by that in our next release, but in the meantime, have a look for yourself at the breadth of icons. Every icon has also been reprocessed to resolve SVGO issues that prevented them from being opened in some apps.</p> -<p><img src="/assets/img/2020/05/bootstrap-icons-alpha4-all.png" class="d-block img-fluid mb-2 rounded border" alt="All Bootstrap Icons" loading="lazy" width="1681" height="2470"> -</p> -<h2 id="download">Download</h2> -<p>Alpha 4 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha4</code>, or by snagging the <a href="https://www.figma.com/file/XDj1VewxEtXzkDDMAvWx2W/Bootstrap-Icons-v1.0.0-alpha4">icons from Figma</a>.</p> - </div> </div> diff --git a/page/9/index.html b/page/9/index.html index d7ac3290..d14ca32c 100644 --- a/page/9/index.html +++ b/page/9/index.html @@ -203,6 +203,45 @@ <div class="posts"> <div class="post"> <h1 class="post-title fw-600"> + <a href="/2020/05/21/bootstrap-icons-alpha4/" class="text-decoration-none"> + Bootstrap Icons Alpha 4 + </a> + </h1> + + <div class="d-flex align-items-center mb-4 text-muted author-info"> + <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> + <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" + src="https://github.com/mdo.png?size=32" + alt="" width="32" height="32"> + <span>@mdo</span> + </a> + <span class="d-flex align-items-center ms-3" title="21 May 20 09:30 UTC"> + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> + <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> + <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> +</svg> + + May 21, 2020 + </span> +</div> +<div class="ratio ratio-16x9"> + <iframe src="https://www.youtube-nocookie.com/embed/2ZBtPf7FOoM?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> +</div> + + + + + <p>We’re closing in on 700 icons in Bootstrap Icons with today’s release, Alpha 4! We’ve spent some time under the hood of our build process to improve a few things, added tons of new icons, and fixed some bugs and inconsistencies.</p> +<p>We’ve shipped tons of new commerce icons for all your shopping cart needs, added tons of calendar options (I couldn’t settle on one design), tons of new shape arrows, and more.</p> +<h2 id="700-icons">~700 icons!</h2> +<p>With 140 new icons in this release, we’ve almost hit 700 icons. We’re likely to fly by that in our next release, but in the meantime, have a look for yourself at the breadth of icons. Every icon has also been reprocessed to resolve SVGO issues that prevented them from being opened in some apps.</p> +<p><img src="/assets/img/2020/05/bootstrap-icons-alpha4-all.png" class="d-block img-fluid mb-2 rounded border" alt="All Bootstrap Icons" loading="lazy" width="1681" height="2470"> +</p> +<h2 id="download">Download</h2> +<p>Alpha 4 has been published to GitHub and npm (package name <code>bootstrap-icons</code>). Get your hands on it <a href="https://github.com/twbs/icons/releases">from GitHub</a>, by updating to <code>v1.0.0-alpha4</code>, or by snagging the <a href="https://www.figma.com/file/XDj1VewxEtXzkDDMAvWx2W/Bootstrap-Icons-v1.0.0-alpha4">icons from Figma</a>.</p> + + </div><div class="post"> + <h1 class="post-title fw-600"> <a href="/2020/05/12/bootstrap-4-5-0/" class="text-decoration-none"> Bootstrap 4.5.0 </a> @@ -212,7 +251,7 @@ <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32"> + alt="" width="32" height="32" loading="lazy"> <span>@mdo</span> </a> <span class="d-flex align-items-center ms-3" title="12 May 20 00:00 UTC"> @@ -225,7 +264,7 @@ </span> </div> <div class="ratio ratio-16x9"> - <iframe src="https://www.youtube-nocookie.com/embed/tNG62fULYgI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> + <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/tNG62fULYgI?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> </div> @@ -398,58 +437,6 @@ <p>In <a href="/2019/11/26/bootstrap-4-4-0/">v4.4.0</a>, we added <code>add()</code> and <code>subtract()</code> functions to avoid errors when using zero values in CSS’s built in <code>calc()</code> function. While these functions work as expected with our build system, which is based on <code>node-sass</code>, some alert developers noticed that <a href="https://github.com/twbs/bootstrap/issues/29743">things broke when using another Sass compiler</a> like Dart Sass or Ruby Sass. To resolve this issue, we’ve tweaked these functions a bit to output what we would expect.</p> <p>Lastly, we also added a <a href="https://github.com/twbs/bootstrap/pull/29762">theming fix</a> for some custom forms in a disabled fieldset.</p> - </div><div class="post"> - <h1 class="post-title fw-600"> - <a href="/2019/11/26/bootstrap-4-4-0/" class="text-decoration-none"> - Bootstrap 4.4.0 - </a> - </h1> - - <div class="d-flex align-items-center mb-4 text-muted author-info"> - <a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener"> - <img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x" - src="https://github.com/mdo.png?size=32" - alt="" width="32" height="32" loading="lazy"> - <span>@mdo</span> - </a> - <span class="d-flex align-items-center ms-3" title="26 Nov 19 00:00 UTC"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor"> - <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> - <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> -</svg> - - November 26, 2019 - </span> -</div> -<div class="ratio ratio-16x9"> - <iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/P5ZJui3aPoQ?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe> -</div> - - - - - <p>Bootstrap 4 has a new update with a handful of feature changes. We’ve had quite the lengthy pull request to add responsive containers—big thanks to the developers who contribute to Bootstrap for sticking with it and helping us along the way. Nearly all new features will be carried forward into Bootstrap 5, so feel free to start using them now.</p> -<h2 id="highlights">Highlights</h2> -<p>Here’s what you need to know about v4.4.0. Remember that with every minor and major release of Bootstrap, we ship a new URL for our hosted docs to ensure URLs continue to work.</p> -<ul> -<li><strong>New responsive containers!</strong> Over a year in the making, fluid up to a particular breakpoint, available for all responsive tiers.</li> -<li><strong>New responsive <code>.row-cols</code> classes</strong> for quickly specifying the number of columns across breakpoints. This one is huge for those of you who have asked for responsive card decks.</li> -<li><strong>New <code>escape-svg()</code> function</strong> for simplifying our embedded <code>background-image</code> SVGs for forms and more.</li> -<li><strong>New <code>add()</code> and <code>subtract()</code> functions</strong> for avoiding errors and zero values from CSS’s built in <code>calc</code> feature.</li> -<li><strong>New <code>make-col-auto()</code> mixin</strong> to make our <code>.col-auto</code> class available with custom HTML.</li> -<li>Fixed an issue with Microsoft Edge not picking up <code>:disabled</code> styles by moving selectors to <code>[disabled]</code>.</li> -<li><strong>Deprecated:</strong> <code>bg-variant()</code>, <code>nav-divider()</code>, and <code>form-control-focus()</code> mixins are now deprecated as they’re going away in v5.</li> -<li>Updated our spacing and alignment for modal footer elements like buttons to automatically wrap when space is constrained.</li> -<li>More flexible form control validation styles thanks to fewer chained selectors. Also updated the <code>:invalid</code> validation icon to be an alert instead of an <code>&times;</code> to avoid confusion with browser functionality for clearing the form field value.</li> -<li>Fixed a couple dozen CSS and JS bugs.</li> -<li>Moved to GitHub Actions for CI/CD! Expect more updates to our CI setup over time here while Actions evolves.</li> -<li>Updated documentation to fix links and typos, improved landmarks for secondary navigation, and a new security doc for guidelines on reporting potential vulnerabilities.</li> -</ul> -<p>We’ve shipped a lot more in this release, so be sure to check out the <a href="https://github.com/twbs/bootstrap/issues?q=project%3Atwbs%2Fbootstrap%2F18+is%3Aclosed+sort%3Aupdated-desc">v4.4.0 ship list of closed issues and merged pull requests</a> for more details.</p> -<p><a href="https://getbootstrap.com/docs/4.4/">Head to to the v4.4.0 docs</a> to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.</p> -<h2 id="support-the-team">Support the team</h2> -<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p> - </div> </div> diff --git a/sitemap.xml b/sitemap.xml index da99e431..2aafef8e 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -2,14 +2,18 @@ <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>https://blog.getbootstrap.com/archive/</loc> - <lastmod>2022-10-03T08:00:00+00:00</lastmod> + <lastmod>2022-11-11T00:01:00+00:00</lastmod> </url> <url> - <loc>https://blog.getbootstrap.com/2022/10/03/bootstrap-5-2-2/</loc> - <lastmod>2022-10-03T08:00:00+00:00</lastmod> + <loc>https://blog.getbootstrap.com/</loc> + <lastmod>2022-11-11T00:01:00+00:00</lastmod> </url> <url> - <loc>https://blog.getbootstrap.com/</loc> + <loc>https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/</loc> + <lastmod>2022-11-11T00:01:00+00:00</lastmod> + </url> + <url> + <loc>https://blog.getbootstrap.com/2022/10/03/bootstrap-5-2-2/</loc> <lastmod>2022-10-03T08:00:00+00:00</lastmod> </url> <url> |
