rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Make subnav and sidebar work on mobile too

Browse Source
This commit is contained in:
Mark Otto 2019-07-19 00:33:34 +03:00 committed by Mark Otto
parent 956cbbc6b7
commit 5a0be01e3e
5 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/layouts/partials/docs-navbar.html
View File

@ -1,4 +1,4 @@
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar px-0">
<div class="container flex-wrap flex-md-nowrap py-0 px-3">
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}

2
site/layouts/partials/docs-sidebar.html
View File

@ -21,7 +21,7 @@
</a>
{{- if $group.pages }}
<ul class="nav bd-sidenav mb-2">
<ul class="nav bd-sidenav flex-column mb-2">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize }}
<li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}>

17
site/layouts/partials/docs-subnav.html
View File

@ -1,8 +1,10 @@
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
<div class="container d-flex align-items-md-center flex-column flex-md-row">
<div class="d-flex align-items-center mb-2 mb-md-0 mr-md-auto">
<div class="container d-flex align-items-md-center flex-wrap">
<div class="d-flex align-items-center mr-md-auto order-2 order-md-0">
<div class="d-none d-md-block">
<a class="link-dark" href="/" onclick="ga('send', 'event', 'Subnav', 'click', 'Bootstrap');">Bootstrap</a>
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
</div>
{{ if (eq .Page.Layout "docs") or (eq .Page.Layout "single") }}
<a class="link-dark" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Subnav', 'click', 'Documentation');">Documentation</a>
@ -15,11 +17,16 @@
{{ partial "icons/booticon-chevron-right.svg" (dict "class" "booticon d-inline-block mx-2 flex-shrink-0" "width" "12px" "height" "12px") }}
<span class="text-muted">Examples</span>
{{ end }}
</div>
<form class="bd-search d-flex align-items-center">
<form class="bd-search d-flex align-items-center mb-2 mb-md-0">
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
</form>
{{ if eq .Page.Layout "docs" }}
<button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
{{ partial "icons/menu.svg" (dict "width" "30" "height" "30") }}
</button>
{{ end }}
</div>
</nav>

3
site/static/docs/4.3/assets/scss/_nav.scss
View File

@ -46,9 +46,6 @@
background-color: $bd-purple-bright;
@include media-breakpoint-down(md) {
padding-right: .5rem;
padding-left: .5rem;
.navbar-nav-scroll {
width: 100%;
height: 2.5rem;

4
site/static/docs/4.3/assets/scss/_sidebar.scss
View File

@ -22,6 +22,10 @@
.bd-search {
position: relative; // To contain the Algolia search
@include media-breakpoint-down(md) {
width: 100%;
}
.form-control:focus {
border-color: $bd-purple-bright;
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);