mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-22 14:19:46 +01:00
Merge branch 'v4-dev' into v4-navbars
This commit is contained in:
Mark Otto
commit
1db3586dc0
@ -170,6 +170,7 @@ module.exports = function (grunt) {
|
||||
compatibility: 'ie9',
|
||||
keepSpecialComments: '*',
|
||||
sourceMap: true,
|
||||
sourceMapInlineSources: true,
|
||||
advanced: false
|
||||
},
|
||||
core: {
|
||||
|
||||
10
_config.yml
10
_config.yml
@ -14,7 +14,7 @@ destination: _gh_pages
|
||||
host: 0.0.0.0
|
||||
port: 9001
|
||||
baseurl: ""
|
||||
url: http://getbootstrap.com
|
||||
url: http://v4-alpha.getbootstrap.com
|
||||
encoding: UTF-8
|
||||
exclude: [assets/scss/]
|
||||
|
||||
@ -22,6 +22,14 @@ gems:
|
||||
- jekyll-redirect-from
|
||||
- jekyll-sitemap
|
||||
|
||||
# Social
|
||||
title: Bootstrap
|
||||
description: The most popular HTML, CSS, and JS framework in the world.
|
||||
twitter: getbootstrap
|
||||
authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
|
||||
social_logo_path: /assets/brand/bootstrap-social-logo.png
|
||||
social_image_path: /assets/brand/bootstrap-social.png
|
||||
|
||||
# Custom vars
|
||||
current_version: 4.0.0-alpha.4
|
||||
repo: https://github.com/twbs/bootstrap
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
summary: >
|
||||
Visual artifacts in scrollable modal dialogs
|
||||
upstream_bug: >
|
||||
Edge#9011176
|
||||
origin: >
|
||||
Bootstrap#20755
|
||||
|
||||
-
|
||||
browser: >
|
||||
Microsoft Edge
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
|
||||
<title>
|
||||
{% if page.layout == "home" %}
|
||||
{{ page.title }}
|
||||
{% if page.title %}
|
||||
{{ page.title }} · {{ site.title }}
|
||||
{% else %}
|
||||
{{ page.title }} · Bootstrap
|
||||
{{ site.title }} · {{ site.description }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
{% include social.html %}
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
{% if site.github %}
|
||||
<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
31
docs/_includes/social.html
Normal file
31
docs/_includes/social.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@{{ site.twitter }}">
|
||||
<meta name="twitter:creator" content="@{{ site.twitter }}">
|
||||
|
||||
{% if page.title %}
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="{{ page.title }}">
|
||||
<meta name="twitter:description" content="{{ page.description }}">
|
||||
<meta name="twitter:image" content="{{ site.url }}{{ site.social_logo_path }}">
|
||||
{% else %}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ site.title }}">
|
||||
<meta name="twitter:description" content="{{ site.description }}">
|
||||
<meta name="twitter:image" content="{{ site.url }}{{ site.social_image_path }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Facebook -->
|
||||
{% if page.title %}
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
|
||||
<meta property="og:title" content="{{ page.title }}">
|
||||
<meta property="og:description" content="{{ page.description }}">
|
||||
{% else %}
|
||||
<meta property="og:url" content="{{ site.url }}">
|
||||
<meta property="og:title" content="{{ site.title }}">
|
||||
<meta property="og:description" content="{{ site.description }}">
|
||||
{% endif %}
|
||||
<meta property="og:image" content="{{ site.url }}{{ site.social_image_path }}">
|
||||
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
<meta name="author" content="{{ site.authors }}">
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Brand guidelines
|
||||
description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: History
|
||||
description: A brief overview of the history of Bootstrap.
|
||||
group: about
|
||||
redirect_from: "/about/"
|
||||
---
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: License FAQs
|
||||
description: Commonly asked questions about Bootstrap's open source license.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Team
|
||||
description: An overview of the founding team and core contributors to Bootstrap.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Translations
|
||||
description: Links to community-translated Bootstrap documentation sites.
|
||||
group: about
|
||||
---
|
||||
|
||||
|
||||
BIN
docs/assets/brand/bootstrap-social-logo.png
Normal file
BIN
docs/assets/brand/bootstrap-social-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
docs/assets/brand/bootstrap-social.png
Normal file
BIN
docs/assets/brand/bootstrap-social.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
@ -324,7 +324,7 @@
|
||||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2);
|
||||
margin: 1rem (-$grid-gutter-width-base / 2);
|
||||
background-color: #f7f7f9;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
||||
@ -26,10 +26,10 @@
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.col-sm-6:first-child {
|
||||
padding-right: ($grid-gutter-width * 1.5);
|
||||
padding-right: ($grid-gutter-width-base * 1.5);
|
||||
};
|
||||
.col-sm-6:last-child {
|
||||
padding-left: ($grid-gutter-width * 1.5);
|
||||
padding-left: ($grid-gutter-width-base * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
.bd-masthead {
|
||||
position: relative;
|
||||
padding: 3rem ($grid-gutter-width / 2) 2rem;
|
||||
padding: 3rem ($grid-gutter-width-base / 2) 2rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// scss-lint:disable ImportantRule
|
||||
|
||||
.bd-pageheader {
|
||||
padding: 2rem ($grid-gutter-width / 2);
|
||||
padding: 2rem ($grid-gutter-width-base / 2);
|
||||
margin-bottom: 1.5rem;
|
||||
color: $bd-purple-light;
|
||||
text-align: center;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Alerts
|
||||
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Breadcrumb
|
||||
description: Indicate the current page's location within a navigational hierarchy.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Button group
|
||||
description: Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Buttons
|
||||
description: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
|
||||
group: components
|
||||
redirect_from: "/components/"
|
||||
---
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Cards
|
||||
description: Bootstrap Cards provide a flexible and extensible content container with multiple variants and options.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Carousel
|
||||
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Collapse
|
||||
description: Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Dropdowns
|
||||
description: Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Forms
|
||||
description: Examples and usage guidelines for from controls, form layouts, and custom forms.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Input group
|
||||
description: Extend form controls with the input group.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Jumbotron
|
||||
description: Lightweight, flexible component for showcasing hero unit style content.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: List group
|
||||
description: Learn about Bootstrap's list group component for rendering series of related content.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Modal
|
||||
description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Navbar
|
||||
description: Documentation and examples for Bootstrap's powerful, responsive navigation header.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Navs
|
||||
description: Documentation and examples for how to use Bootstrap's included navigation components.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Pagination
|
||||
description: Documentation and examples for showing pagination links.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Popovers
|
||||
description: Documentation and examples for adding Bootstrap popovers to your site.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Progress
|
||||
description: Documentation and examples for using Bootstrap progress bars.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Scrollspy
|
||||
description: Documentation and examples for the scrollspy plugin with Bootstrap's navigation components.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Tags
|
||||
description: Documentation and examples for tags, our small label-badge component.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Tooltips
|
||||
description: Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript.
|
||||
group: components
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Code
|
||||
description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.
|
||||
group: content
|
||||
---
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Figures
|
||||
description: Documentation and examples for displaying related images and text with the figure component in Bootstrap.
|
||||
group: content
|
||||
---
|
||||
|
||||
Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
|
||||
Anytime you need to display a piece of content—like an image with an optional caption, consider using a `<figure>`.
|
||||
|
||||
Use the included `.figure` , `.figure-img` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. Images in figures have no explicit size, so be sure to add the `.img-fluid` class to your `<img>` to make it responsive.
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Images
|
||||
description: Documentation and examples for styling images with Bootstrap.
|
||||
group: content
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Reboot
|
||||
description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
|
||||
group: content
|
||||
redirect_from: "/content/"
|
||||
---
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Tables
|
||||
description: Documentation and examples for styling tables with Bootstrap.
|
||||
group: content
|
||||
---
|
||||
|
||||
@ -13,7 +14,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
|
||||
|
||||
## Examples
|
||||
|
||||
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
|
||||
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap. **All table styles are inherited in Bootstrap 4**, meaning any nested tables will be styled in the same manner as the parent.
|
||||
|
||||
{% example html %}
|
||||
<table class="table">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Typography
|
||||
description: Documentation and examples for Bootstrap typography, including global settings, body text, lists, and more.
|
||||
group: content
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Accessibility
|
||||
description: Learn how Bootstrap supports common web standards for making sites that are accessibile to those using assistive technology.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Best practices
|
||||
description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Browsers and devices
|
||||
description: Learn which browsers and devices are supported by Bootstrap.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Build tools
|
||||
description: Details on how to use Bootstrap's included build tools to compile source code, run tests, and more.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Contents
|
||||
description: Learn about what's included in Bootstrap's precompiled and source code directories.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Download
|
||||
description: Download Bootstrap's compiled CSS and JavaScript, source code, or include it with your favorite package manager.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Flexbox
|
||||
description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Introduction
|
||||
description: Get started with Bootstrap using the Bootstrap CDN and a template starter page.
|
||||
group: getting-started
|
||||
redirect_from: "/getting-started/"
|
||||
---
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: JavaScript
|
||||
description: Learn about Bootstrap's JavaScript—how to include it, our data and programmatic API options, and more.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Customization options
|
||||
description: Customize Bootstrap with Sass variables, easily toggling global preferences with a quick recompile.
|
||||
group: getting-started
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
layout: home
|
||||
title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
|
||||
---
|
||||
|
||||
<main class="bd-masthead" id="content">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Flexbox grid system
|
||||
description: Documentation and examples for using Bootstrap's optional flexbox grid system.
|
||||
group: layout
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Grid system
|
||||
description: Documentation and examples for using Bootstrap's powerful, responsive, and mobile-first grid system.
|
||||
group: layout
|
||||
---
|
||||
|
||||
@ -139,7 +140,15 @@ Variables and maps determine the number of columns, the gutter width, and the me
|
||||
|
||||
{% highlight scss %}
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 30px;
|
||||
$grid-gutter-width-base: 30px;
|
||||
|
||||
$grid-gutter-widths: (
|
||||
xs: $grid-gutter-width-base, // 30px
|
||||
sm: $grid-gutter-width-base, // 30px
|
||||
md: $grid-gutter-width-base, // 30px
|
||||
lg: $grid-gutter-width-base, // 30px
|
||||
xl: $grid-gutter-width-base // 30px
|
||||
)
|
||||
|
||||
$grid-breakpoints: (
|
||||
// Extra small screen / phone
|
||||
@ -168,23 +177,27 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
|
||||
|
||||
{% highlight scss %}
|
||||
// Creates a wrapper for a series of columns
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
@mixin make-row($gutters: $grid-gutter-widths) {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
} @else {
|
||||
@include clearfix();
|
||||
}
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
margin-right: ($gutter / -2);
|
||||
margin-left: ($gutter / -2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make the element grid-ready (applying everything but the width)
|
||||
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
||||
@mixin make-col-ready($gutters: $grid-gutter-widths) {
|
||||
position: relative;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
@ -192,6 +205,14 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
@ -463,11 +484,18 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
|
||||
|
||||
### Columns and gutters
|
||||
|
||||
The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters.
|
||||
The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-widths` allows breakpoint-specific widths that are divided evenly across `padding-left` and `padding-right` for the column gutters.
|
||||
|
||||
{% highlight scss %}
|
||||
$grid-columns: 12;
|
||||
$grid-gutter-width: 30px;
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width-base: 30px !default;
|
||||
$grid-gutter-widths: (
|
||||
xs: $grid-gutter-width-base,
|
||||
sm: $grid-gutter-width-base,
|
||||
md: $grid-gutter-width-base,
|
||||
lg: $grid-gutter-width-base,
|
||||
xl: $grid-gutter-width-base
|
||||
) !default;
|
||||
{% endhighlight %}
|
||||
|
||||
### Grid tiers
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Media object
|
||||
description: Documentation and examples for Bootstrap's media object to construct highly repetitive components like blog comments, tweets, and the like.
|
||||
group: layout
|
||||
---
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Overview
|
||||
description: Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
|
||||
group: layout
|
||||
redirect_from: "/layout/"
|
||||
---
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Responsive utilities
|
||||
description: Use responsive display utility classes for showing and hiding content by device, via media query.
|
||||
group: layout
|
||||
---
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
> .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" button to the front
|
||||
&:focus,
|
||||
|
||||
@ -141,6 +141,7 @@
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
font-size: $font-size-sm;
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
|
||||
@ -18,8 +18,16 @@
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@include border-radius($input-border-radius);
|
||||
@if $enable-rounded {
|
||||
// Manually use the if/else instead of the mixin to account for iOS override
|
||||
border-radius: $input-border-radius;
|
||||
} @else {
|
||||
// Otherwise undo the iOS default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
|
||||
|
||||
@ -239,6 +247,7 @@ select.form-control-lg {
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $text-muted;
|
||||
cursor: $cursor-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
@ -318,8 +318,6 @@ textarea {
|
||||
// properly inherited. However, `line-height` isn't addressed there. Using this
|
||||
// ensures we don't need to unnecessarily redeclare the global font stack.
|
||||
line-height: inherit;
|
||||
// iOS adds rounded borders by default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
|
||||
@ -150,9 +150,15 @@ $container-max-widths: (
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width-base: 30px !default;
|
||||
$grid-gutter-widths: (
|
||||
xs: $grid-gutter-width-base,
|
||||
sm: $grid-gutter-width-base,
|
||||
md: $grid-gutter-width-base,
|
||||
lg: $grid-gutter-width-base,
|
||||
xl: $grid-gutter-width-base
|
||||
) !default;
|
||||
|
||||
// Typography
|
||||
//
|
||||
@ -375,13 +381,15 @@ $custom-control-active-indicator-bg: #84c6ff !default;
|
||||
$custom-control-active-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-radius: $border-radius !default;
|
||||
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
|
||||
$custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$custom-checkbox-indeterminate-bg: #0074d9 !default;
|
||||
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default;
|
||||
$custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default;
|
||||
$custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E") !default;
|
||||
$custom-checkbox-indeterminate-box-shadow: none !default;
|
||||
|
||||
$custom-radio-radius: 50% !default;
|
||||
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !default;
|
||||
$custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
@ -391,7 +399,8 @@ $custom-select-disabled-color: $gray-light !default;
|
||||
$custom-select-bg: #fff !default;
|
||||
$custom-select-disabled-bg: $gray-lighter !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
|
||||
$custom-select-indicator-color: #333 !default;
|
||||
$custom-select-indicator: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
@ -428,23 +437,28 @@ $custom-file-text: (
|
||||
|
||||
|
||||
// Form validation icons
|
||||
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
|
||||
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
|
||||
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
|
||||
$form-icon-success-color: $brand-success !default;
|
||||
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$form-icon-warning-color: $brand-warning !default;
|
||||
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$form-icon-danger-color: $brand-danger !default;
|
||||
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-icon-danger-color}' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-min-width: 160px !default;
|
||||
$dropdown-padding-y: 5px !default;
|
||||
$dropdown-margin-top: 2px !default;
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-margin-top: .125rem !default;
|
||||
$dropdown-bg: #fff !default;
|
||||
$dropdown-border-color: rgba(0,0,0,.15) !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-divider-bg: #e5e5e5 !default;
|
||||
$dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba(0,0,0,.175) !default;
|
||||
|
||||
$dropdown-link-color: $gray-dark !default;
|
||||
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
|
||||
@ -455,7 +469,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: $gray-light !default;
|
||||
|
||||
$dropdown-item-padding-x: 20px !default;
|
||||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-light !default;
|
||||
|
||||
|
||||
@ -3,20 +3,18 @@
|
||||
// Used only by Bootstrap to generate the correct number of grid classes given
|
||||
// any value of `$grid-columns`.
|
||||
|
||||
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
|
||||
|
||||
@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
|
||||
// Common properties for all breakpoints
|
||||
%grid-column {
|
||||
position: relative;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include make-gutters($gutters);
|
||||
}
|
||||
|
||||
$breakpoint-counter: 0;
|
||||
@ -38,8 +36,6 @@
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
min-height: 1px;
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
//
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-container($gutter: $grid-gutter-width) {
|
||||
@mixin make-container($gutter: $grid-gutter-width-base) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: ($gutter / 2);
|
||||
@ -22,22 +22,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
@mixin make-gutters($gutters: $grid-gutter-widths) {
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-row($gutters: $grid-gutter-widths) {
|
||||
@if $enable-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
} @else {
|
||||
@include clearfix();
|
||||
}
|
||||
margin-left: ($gutter / -2);
|
||||
margin-right: ($gutter / -2);
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
margin-right: ($gutter / -2);
|
||||
margin-left: ($gutter / -2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col-ready($gutter: $grid-gutter-width) {
|
||||
@mixin make-col-ready($gutters: $grid-gutter-widths) {
|
||||
position: relative;
|
||||
min-height: 1px; // Prevent collapsing
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
|
||||
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
||||
// always setting `width: 100%;`. This works because we use `flex` values
|
||||
@ -45,6 +59,14 @@
|
||||
@if $enable-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($gutters) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$gutter: map-get($gutters, $breakpoint);
|
||||
padding-right: ($gutter / 2);
|
||||
padding-left: ($gutter / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-col($size, $columns: $grid-columns) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user