From c4307886eabede635705649bdcc9abee9c0b7186 Mon Sep 17 00:00:00 2001 From: chomik Date: Mon, 20 May 2019 23:59:30 +0200 Subject: [PATCH] breadcrumb --- pages/_data/docs.yml | 1 + pages/_docs/breadcrumb.md | 17 + pages/_docs/inputs.md | 1315 ---------------------------- pages/_docs/steps.md | 1 + pages/_includes/ui/breadcrumb.html | 10 + scss/ui/_breadcrumbs.scss | 15 + 6 files changed, 44 insertions(+), 1315 deletions(-) create mode 100644 pages/_docs/breadcrumb.md delete mode 100644 pages/_docs/inputs.md create mode 100644 pages/_includes/ui/breadcrumb.html diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml index 99595998..b83f4a6b 100644 --- a/pages/_data/docs.yml +++ b/pages/_data/docs.yml @@ -1,6 +1,7 @@ - page: alerts - page: avatars - page: badges +- page: breadcrumb - page: buttons - page: cards - page: carousel diff --git a/pages/_docs/breadcrumb.md b/pages/_docs/breadcrumb.md new file mode 100644 index 00000000..4a4d965e --- /dev/null +++ b/pages/_docs/breadcrumb.md @@ -0,0 +1,17 @@ +--- +title: Breadcrumb +menu: docs.breadcrumb +--- + +## Default markup + +{% example %} +{% include ui/breadcrumb.html %} +{% endexample %} + +## Breadcrumb variations + +{% example %} +{% include ui/breadcrumb.html class="breadcrumb-dots" %} +{% include ui/breadcrumb.html class="breadcrumb-arrows" %} +{% endexample %} diff --git a/pages/_docs/inputs.md b/pages/_docs/inputs.md deleted file mode 100644 index ebdae8aa..00000000 --- a/pages/_docs/inputs.md +++ /dev/null @@ -1,1315 +0,0 @@ ---- -title: Form components ---- - -## Overview - -Bootstrap's form controls expand on [our Rebooted form styles]({{< docsref "/content/reboot#forms" >}}) with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. - -Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more. - -Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more. - -{% example %} -
-
- - - We'll never share your email with anyone else. -
-
- - -
-
- - -
- -
-{% endexample %} - -## Form controls - -Textual form controls—like ``s, ` - - -{% endexample %} - -For file inputs, swap the `.form-control` for `.form-control-file`. - -{% example %} -
-
- - -
-
-{% endexample %} - -### Sizing - -Set heights using classes like `.form-control-lg` and `.form-control-sm`. - -{% example %} - - - -{% endexample %} - -{% example %} - - - -{% endexample %} - -### Readonly - -Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor. - -{% example %} - -{% endexample %} - -### Readonly plain text - -If you want to have `` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding. - -{% example %} -
-
- -
- -
-
-
- -
- -
-
-
-{% endexample %} - -{% example %} -
-
- - -
-
- - -
- -
-{% endexample %} - -## Range Inputs - -Set horizontally scrollable range inputs using `.form-control-range`. - -{% example %} -
-
- - -
-
-{% endexample %} - -## Checkboxes and radios - -Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. - -Disabled checkboxes and radios are supported. The `disabled` attribute will apply a lighter color to help indicate the input's state. - -Checkboxes and radios use are built to support HTML-based form validation and provide concise, accessible labels. As such, our ``s and `