Параметры
Быстрая настройка Bootstrap со встроенными переменными для легкого переключения глобальных настроек CSS для управления стилем и поведением.
Настройте Bootstrap с помощью нашего встроенного файла пользовательских переменных и легко переключайте глобальные настройки CSS с помощью новых переменных Sass $enable-* . Замените значение переменной и при необходимости перекомпилируйте с помощью npm run test .
Вы можете найти и настроить эти переменные для ключевых глобальных параметров в файле Bootstrap scss/_variables.scss .
Переменная | Значения | Описание |
---|---|---|
$spacer | 1rem (по умолчанию), или любое значение > 0 | Задает значение разделителя по умолчанию для программного создания наших утилиты интервала. |
$enable-rounded | true (по умолчанию) или false | Включает предопределенные border-radius стили для различных компонентов. |
$enable-shadows | true или false (по умолчанию) | Включает предопределенные декоративные стили box-shadow для различных компонентов. Не влияет на box-shadow , используемый для состояний фокуса. |
$enable-gradients | true или false (по умолчанию) | Включает предопределенные градиенты с помощью background-image стилей на различных компонентов. |
$enable-transitions | true (по умолчанию) или false | Включает предопределенные transition на различных компонентах. |
$enable-reduced-motion | true (по умолчанию) или false | Включает медиа выражение prefers-reduced-motion , который подавляет определенные анимации/переходы на основе настроек браузера/операционной системы пользователя. |
$enable-grid-classes | true (по умолчанию) или false | Позволяет генерировать классы CSS для системы сеток (например .row , .col-md-1 и т. д.). |
$enable-container-classes | true (по умолчанию) или false | Позволяет генерировать классы CSS для контейнеров макета. (Новое в v5.2.0) |
$enable-caret | true (по умолчанию) или false | Включает каретку псевдоэлемента .dropdown-toggle . |
$enable-button-pointers | true (по умолчанию) или false | Добавить курсор “в виде руки” к неотключенным кнопочным элементам. |
$enable-rfs | true (по умолчанию) или false | Глобально включает RFS. |
$enable-validation-icons | true (по умолчанию) или false | Включает иконки background-image в текстовых входах и некоторые настраиваемые формы для состояний проверки. |
$enable-negative-margins | true или false (по умолчанию) | Позволяет генерировать отрицательные утилиты margin. |
$enable-deprecation-messages | true (по умолчанию) или false | Установите значение false , чтобы скрыть предупреждения при использовании любых устаревших миксинов и функций, которые планируется удалить в v6 . |
$enable-important-utilities | true (по умолчанию) или false | Включает !important суффикс в служебных классах. |
$enable-smooth-scroll | true (по умолчанию) или false | Применяет scroll-behavior: smooth глобально, за исключением пользователей, запрашивающих уменьшение движения через медиа-запрос prefers-reduced-motion |
Sizing
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
Width and height utilities are generated from the $sizes Sass map in _variables.scss . Includes support for 25% , 50% , 75% , and 100% by default. Modify those values as you need to generate different utilities here.
class="w-25 p-3" style="background-color: #eee;">Width 25% class="w-50 p-3" style="background-color: #eee;">Width 50% class="w-75 p-3" style="background-color: #eee;">Width 75% class="w-100 p-3" style="background-color: #eee;">Width 100%
Height 100%
style="height: 100px; background-color: rgba(255,0,0,0.1);"> class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25% class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50% class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75% class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%
You can also use max-width: 100%; and max-height: 100%; utilities as needed.
class="mw-100" src=". " alt="Max-width 100%">
Max-height 100%
style="height: 100px; background-color: rgba(255,0,0,0.1);"> class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%
Как отменить стили для тега h1 в bootstrap?
Добрый день!
Хочу применить тег h1 для разметки и поисковика, но не хочу, чтобы с ним применялись и готовые стили в bootstrap.
Как-то это можно сделать без чистки css bootsrap и использования !important?
Например, к тегу прописать no-style или еще что, не знаю (
- Вопрос задан более трёх лет назад
- 7791 просмотр
2 комментария
Оценить 2 комментария
DetectiveEl @DetectiveEl
у меня аналогичный вопрос, поясню свою проблему, я хочу использовать тег fieldset и legend, но в бутстрапе к этим тегам прописаны стили, и они не отображаются, так как они должны отображаться
А не проще свои стили подключить после стилей bootstrap?
Решения вопроса 2
Инженер и вэб-дизайнер, рисую.
Не понимаю вопроса. Добавьте тегу h1 класс no-bootstrap и пропишите стили. Или вообще инлайн-стилями сделайте.
Ответ написан более трёх лет назад
Владимир Маврин @Makkons Автор вопроса
ТЕКСТ
не работает.
у .span3 logo уже прописаны мне необходимые стили, которые и перебивает h1
Владимир Маврин @Makkons Автор вопроса
Сейчас сделал так: в css к .span3 logo дописал через запятую тег h1. Но пришлось еще в эти классы дописать стили, которые есть в h1, что бы перебить их.
Думал есть более удобное решение, по типу no-bootstrap, которое почему то не работает.
Владимир Маврин @Makkons Автор вопроса
ТЕКСТ
@Makkons no-bootstrap — это я такой класс придумал ) я о том, что дайте этому элементу любой класс и пропишите в этом классе все свойства. jsfiddle.net/fFDk5
Владимир Маврин @Makkons Автор вопроса
@iiil умело ввели в заблуждение ) я так и сделал в принцепе
насчет no-bootstrap — нельзя ли написать скрипт, что бы при прописывании класса «no-bootstrap» например тегу h1 в вашей html разметке, jquery обрабатывал эту информацию и закомментировал этот тег в исходниках bootstrap? или присваивал свойства тегов выше.
просто размышления, наверно это и не нужно вообще
Алексей Кулешов @GingerbreadMSK
Мне кажется или класс вида span3 был в bootstrap`е 2.0?
Алексей Кулешов @GingerbreadMSK
ТЕКСТ
4 варианта без использования классов у тега H1
.logo h1 < . >.logo > h1 < . >div.logo h1 < . >div.logo > h1
Алексей Кулешов @GingerbreadMSK
1. inLine-CSS для тегов H1-H6 (не очень хорошо с точки зрения SEO, имеется ввиду style=». «).
2. Рекомендация от Bootstrap: «. добавьте свой CSS файл (с собственными стилями, например для H1) после загрузки основного. «.
Overview
Get the lowdown on the key pieces of Bootstrap’s infrastructure, including our approach to better, faster, stronger web development.
HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
Helper classes
Contextual colors
Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Dealing with specificity
Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a with the class.
Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.
Contextual backgrounds
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Dealing with specificity
Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a with the class.
Conveying meaning to assistive technologies
As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.
Close icon
Use the generic close icon for dismissing content like modals and alerts.
Carets
Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.
Quick floats
Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.
Not for use in navbars
To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.
Center content blocks
Set an element to display: block and center via margin . Available as a mixin and class.
Clearfix
Easily clear float s by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
Showing and hiding content
Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.
Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.
Screen reader and keyboard navigation content
Hide an element to all devices except screen readers with .sr-only . Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.
Image replacement
Utilize the .text-hide class or mixin to help replace an element’s text content with a background image.
Responsive utilities
For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.
Available classes
Use a single or combination of the available classes for toggling content across viewport breakpoints.
Extra small devices Phones ( <768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
---|---|---|---|---|
.visible-xs-* | Visible | Hidden | Hidden | Hidden |
.visible-sm-* | Hidden | Visible | Hidden | Hidden |
.visible-md-* | Hidden | Hidden | Visible | Hidden |
.visible-lg-* | Hidden | Hidden | Hidden | Visible |
.hidden-xs | Hidden | Visible | Visible | Visible |
.hidden-sm | Visible | Hidden | Visible | Visible |
.hidden-md | Visible | Visible | Hidden | Visible |
.hidden-lg | Visible | Visible | Visible | Hidden |
As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.
Group of classes | CSS display |
---|---|
.visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
So, for extra small ( xs ) screens for example, the available .visible-*-* classes are: .visible-xs-block , .visible-xs-inline , and .visible-xs-inline-block .
Print classes
Similar to the regular responsive classes, use these for toggling content for print.
Classes | Browser | |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Hidden | Visible |
.hidden-print | Visible | Hidden |
Test cases
Resize your browser or load on different devices to test the responsive utility classes.
Visible on.
Green checkmarks indicate the element is visible in your current viewport.
Extra small ✔ Visible on x-small
Small ✔ Visible on small
Medium ✔ Visible on medium
Large ✔ Visible on large
Extra small and small ✔ Visible on x-small and small
Medium and large ✔ Visible on medium and large
Extra small and medium ✔ Visible on x-small and medium
Small and large ✔ Visible on small and large
Extra small and large ✔ Visible on x-small and large
Small and medium ✔ Visible on small and medium
Hidden on.
Here, green checkmarks also indicate the element is hidden in your current viewport.
Extra small ✔ Hidden on x-small
Small ✔ Hidden on small
Medium ✔ Hidden on medium
Large ✔ Hidden on large
Extra small and small ✔ Hidden on x-small and small
Medium and large ✔ Hidden on medium and large
Extra small and medium ✔ Hidden on x-small and medium
Small and large ✔ Hidden on small and large
Extra small and large ✔ Hidden on x-small and large
Small and medium ✔ Hidden on small and medium
Using Less
Bootstrap’s CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.
Grid variables and mixins are covered within the Grid system section.
Compiling Bootstrap
Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.
Third party compilation tools may work with Bootstrap, but they are not supported by our core team.
Variables
Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.
Colors
Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.
Use any of these color variables as they are or reassign them to more meaningful variables for your project.
Scaffolding
A handful of variables for quickly customizing key elements of your site’s skeleton.
Links
Easily style your links with the right color with only one value.
Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken , lighten , saturate , and desaturate .
Typography
Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.
Icons
Two quick variables for customizing the location and filename of your icons.
Components
Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.
Vendor mixins
Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.
Box-sizing
Reset your components’ box model with a single mixin. For context, see this helpful article from Mozilla.
The mixin is deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Rounded corners
Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.
Box (Drop) shadows
If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.
The mixin is deprecated as of v3.1.0, since Bootstrap doesn’t officially support the outdated platforms that don’t support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.
Transitions
Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Transformations
Rotate, scale, translate (move), or skew any object.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Animations
A single mixin for using all of CSS3’s animation properties in one declaration and other mixins for individual properties.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Opacity
Set the opacity for all browsers and provide a filter fallback for IE8.
Placeholder text
Provide context for form controls within each field.
Columns
Generate columns via CSS within a single element.
Gradients
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you’ll need.
You can also specify the angle of a standard two-color, linear gradient:
If you need a barber-stripe style gradient, that’s easy, too. Just specify a single color and we’ll overlay a translucent white stripe.
Up the ante and use three colors instead. Set the first color, the second color, the second color’s color stop (a percentage value like 25%), and the third color with these mixins:
Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none; .
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class=»clearfix» to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.
Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
Sizing helpers
Specify the dimensions of an object more easily.
Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior ( both ).
Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
Retina images
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What’s included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
Path | Description |
---|---|
lib/ | Ruby gem code (Sass configuration, Rails and Compass integrations) |
tasks/ | Converter scripts (turning upstream Less to Sass) |
test/ | Compilation tests |
templates/ | Compass package manifest |
vendor/assets/ | Sass, JavaScript, and font files |
Rakefile | Internal tasks, such as rake and convert |
Visit the Sass port’s GitHub repository to see these files in action.
Installation
For information on how to install and use Bootstrap for Sass, consult the GitHub repository readme. It’s the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.
Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.