]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Documentation tweaks (#28679)
authorMartijn Cuppens <martijn.cuppens@gmail.com>
Wed, 8 May 2019 16:58:29 +0000 (18:58 +0200)
committerXhmikosR <xhmikosr@gmail.com>
Wed, 8 May 2019 16:58:29 +0000 (19:58 +0300)
* Documentation tweaks

* Remove redundant col-12 classes

js/tests/integration/index.html
site/content/docs/4.3/examples/grid/index.html
site/content/docs/4.3/layout/grid.md
site/layouts/_default/docs.html
site/layouts/partials/home/masthead-followup.html

index 7b6a68323df847b8c75f5114aa9bf997921e59d0..354577bd70f5838d2e6e601de387fbd80eb4fbae 100644 (file)
@@ -13,7 +13,7 @@
   <body>
     <div class="container">
       <h1>Hello, world!</h1>
-      <div class="col-12 mt-5">
+      <div class="mt-5">
         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
           Tooltip on top
         </button>
index 7fc1f70fb23b92ab3c3b66c6df23f1d9691ae306..230fd6a57b0640f395455513027f07482e4578b3 100644 (file)
@@ -95,10 +95,10 @@ include_js: false
   <hr class="my-4">
 
   <h2 class="mt-4">Mixed: mobile and desktop</h2>
-  <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-  <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
+  <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+  <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
   <div class="row mb-3">
-    <div class="col-12 col-md-8 themed-grid-col">.col-12 .col-md-8</div>
+    <div class="col-md-8 themed-grid-col">.col-md-8</div>
     <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
   </div>
   <div class="row mb-3">
@@ -115,7 +115,7 @@ include_js: false
 
   <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
   <div class="row mb-3">
-    <div class="col-12 col-sm-6 col-lg-8 themed-grid-col">.col-12 .col-sm-6 .col-lg-8</div>
+    <div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
     <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
   </div>
   <div class="row mb-3">
@@ -124,4 +124,4 @@ include_js: false
     <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
   </div>
 
-</div> <!-- /container -->
+</div>
index 75c14088bf41afa4cb891662fcf8c9cb76ea66e2..df606e22248ec1b1c51d505e9335508c13bbccf1 100644 (file)
@@ -303,7 +303,7 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 <div class="container">
   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
-    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
+    <div class="col-md-8">.col-md-8</div>
     <div class="col-6 col-md-4">.col-6 .col-md-4</div>
   </div>
 
@@ -477,7 +477,7 @@ In practice, here's how it looks. Note you can continue to use this with all oth
 <div class="bd-example-row">
 {{< example >}}
 <div class="row no-gutters">
-  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
+  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
 {{< /example >}}
index 7ef4925e1fa18397847e939f4cea83445c7c5c5f..b8a6ab41638dd1012132247b21444f1ce71b811a 100644 (file)
@@ -10,7 +10,7 @@
 
     <div class="container-fluid">
       <div class="row flex-xl-nowrap">
-        <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
+        <div class="col-md-3 col-xl-2 bd-sidebar">
           {{ partial "docs-sidebar" . }}
         </div>
 
@@ -20,7 +20,7 @@
           </nav>
         {{ end }}
 
-        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
           <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
           {{ partial "ads" . }}
index c8528506581a02fe207ae57964991001ba44fc5f..e4c541a2bb201a4d993459c3ccc65cb1f49db65d 100644 (file)
@@ -1,5 +1,5 @@
 <div class="masthead-followup row m-0 border border-white">
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     {{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
     {{ partial "icons/import.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
     <h3>Installation</h3>
@@ -13,7 +13,7 @@
     <a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
   </div>
 
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     {{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
     {{ partial "icons/download.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
     <h3>BootstrapCDN</h3>
@@ -30,7 +30,7 @@
     <a class="btn btn-outline-primary" href="/docs/{{ .Site.Params.docs_version }}/layout/overview/">Explore the docs</a>
   </div>
 
-  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
     {{ "<!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
     {{ partial "icons/lightning.svg" (dict "class" "text-primary mb-2" "width" "32" "height" "32") }}
     <h3>Official Themes</h3>