0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/data/examples.yml
Mark Otto 3e2f9ab237
v5: Floating labels (#30449)
* v5: Promote floating labels example to component

- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example

* Update floating labels to support .form-select, make inputs and selects more consistent

- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity

* Streamline and bulletproof some things

- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC

* Move some values to variables, switch from scaling font-size to scale, update transforms

* Bring over changes from #30966 and add to them to tighten things up

* Delete the now unused example images

* Fix typo

* Allowlist the calc function

* Add transform-origin, update transform values

* Test out autofill fix

* Fix linter issue

* Mention it in the migration guide

* Bump bundlesize

* Add one more variable per review

* Shave .25rem off the height

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-10-27 20:45:48 -07:00

58 lines
2.8 KiB
YAML

- category: Custom Components
description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework."
examples:
- name: Album
description: "Simple one-page template for photo galleries, portfolios, and more."
- name: Pricing
description: "Example pricing page built with Cards and featuring a custom header and footer."
- name: Checkout
description: "Custom checkout form showing our form components and their validation features."
- name: Product
description: "Lean product-focused marketing page with extensive grid and image work."
- name: Cover
description: "A one-page template for building simple and beautiful home pages."
- name: Carousel
description: "Customize the navbar and carousel, then add some new components."
- name: Blog
description: "Magazine like blog template with header, navigation, featured content."
- name: Dashboard
description: "Basic admin dashboard shell with fixed sidebar and navbar."
- name: Sign-in
description: "Custom form layout and design for a simple sign in form."
- name: Sticky footer
description: "Attach a footer to the bottom of the viewport when page content is short."
- name: Sticky footer navbar
description: "Attach a footer to the bottom of the viewport with a fixed top navbar."
- category: Framework
description: "Examples that focus on implementing uses of built-in components provided by Bootstrap."
examples:
- name: "Starter template"
description: "Nothing but the basics: compiled CSS and JavaScript."
- name: Grid
description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
- category: Navbars
description: "Taking the default navbar component and showing how it can be moved, placed, and extended."
examples:
- name: Navbars
description: "Demonstration of all responsive and container options for the navbar."
- name: Navbar static
description: "Single navbar example of a static top navbar along with some additional content."
- name: Navbar fixed
description: "Single navbar example with a fixed top navbar along with some additional content."
- name: Navbar bottom
description: "Single navbar example with a bottom navbar along with some additional content."
- category: Experiments
description: "Examples that focus on future-friendly features or techniques."
examples:
- name: Offcanvas
description: "Turn your expandable navbar into a sliding offcanvas menu."
- category: Integrations
description: "Integrations with external libraries."
examples:
- name: "Masonry"
description: "Combine the powers of the Bootstrap grid and the Masonry layout."