C чего начать
Содержание:
- More
- Выравнивание кнопки по левому или правому краю
- Добавление выпадающих меню с помощью JavaScript
- Menus
- Button Styles
- Quick start
- Создания выпадающего меню, открывающегося вверх
- Images
- How To Style Loading Buttons
- Important globals
- Buttons
- How To Center Vertically AND Horizontally
- How To Style Round Buttons
- How To Create a Button Group
- More
- Отключенные кнопки
- Button Shapes
- Неактивное состояние
- Navigation Bars
- Button Styles
- Community
- Создание форм в Bootstrap
- Button Outline
- Disabled Buttons
- Full-width Buttons
- Quick start
- Menus
- Menus
- Классы групп кнопок
More
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements
Выравнивание кнопки по левому или правому краю
Способы выравнивания кнопки по левому или правому краю в Bootstrap 3 и 4 показаны в нижеприведенных примерах.
<!-- Bootstrap 3 -->
<!-- 1 Способ -->
<!-- Оборачивание кнопки с помощью элемента, например, div (который должен отображаться в документе как блочный) и добления к нему класса text-left или text-right -->
<!-- Выравнивание кнопки по левому краю -->
<div class="text-left">
<button type="button" class="btn btn-primary">Текст кнопки</button>
</div>
<!-- Выравнивание кнопки по правому краю -->
<div class="text-right">
<button type="button" class="btn btn-primary">Текст кнопки</button>
</div>
<!-- 2 Способ -->
<!-- Изменение типа отображения кнопки на блочный и добавления к ней CSS margin-left: auto или margin-right: auto. -->
<!-- Выравнивание кнопки по левому краю -->
<button type="button" class="btn btn-primary" style="display: block; margin-right: auto;">Текст кнопки</button>
<!-- Выравнивание кнопки по правому краю -->
<button type="button" class="btn btn-primary" style="display: block; margin-left: auto;">Текст кнопки</button>
<!-- Bootstrap 4 -->
<!-- 1 Способ -->
<!-- Оборачивание кнопки с помощью элемента, например, div (который должен отображаться в документе как блочный) и добления к нему класса text-left или text-right -->
<!-- Выравнивание кнопки по левому краю -->
<div class="text-left">
<button type="button" class="btn btn-primary">Текст кнопки</button>
</div>
<!-- Выравнивание кнопки по правому краю -->
<div class="text-right">
<button type="button" class="btn btn-primary">Текст кнопки</button>
</div>
<!-- 2 Способ -->
<!-- Изменение типа отображения кнопки на блочный и добавления к ней CSS margin-left: auto или margin-right: auto. В Bootstrap 4 это можно выполнить с помощью классов d-block, mr-auto и ml-auto -->
<!-- Выравнивание кнопки по левому краю -->
<button type="button" class="btn btn-primary d-block mr-auto">Текст кнопки</button>
<!-- Выравнивание кнопки по правому краю -->
<button type="button" class="btn btn-primary d-block ml-auto">Текст кнопки</button>
Добавление выпадающих меню с помощью JavaScript
Вы также можете добавить выпадающие списки к элементам веб-страницы с помощью JavaScript. Для этого Вам необходимо
вызвать для ссылки или кнопки, используя её идентификатор () или имя класса (), метод
Bootstrap .
Примечание: Использование атрибута является необходимым условием для добавления к
компоненту выпадающего списка, независимо от того, вызываете ли вы dropdown (выпадающий список) через JavaScript или
data-api (data attributes).
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-toggle-js").dropdown();
});
</script>
<div class="dropdown">
<a href="#" class="dropdown-toggle-js" data-toggle="dropdown">
Ссылка с выпадающим меню
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li class="divider"></li>
<li><a href="#">Пункт 3</a></li>
</ul>
</div>
Параметры и методы плагина dropdowns
Плагин dropdowns (выпадающий список) не имеет параметров, но зато имеет следующий метод:
Этот метод показывает или скрывает (т.е. переключает из одного состояния в другое) выпадающее меню для указанного с
помощью селектора (идентификатора или класса) элемента веб-страницы. Демонстрация этого метода рассмотрена в
вышеприведенном примере.
События плагина dropdowns
Все события связанные с выпадающими списками выполняются на уровне родительского элемента
(элемента, который управляет отображением или скрытием выпадающего меню). События и их описания представлены в
следующей таблице:
| Событие | Описание |
|---|---|
| show.bs.dropdown | Это событие срабатывает сразу после вызова метода show (показать). Элемент , который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство . |
| shown.bs.dropdown | Это событие срабатывает, когда выпадающий список становится видимым для пользователя (т.е. когда выполнены все CSS стили, необходимые для отображения выпадающего списка). |
| hide.bs.dropdown | Данное событие срабатывает сразу же после вызова метода hide (скрыть). Элемент , который управляет отображением или скрытием выпадающего списка для этого события, доступен через свойство |
| hidden.bs.dropdown | Это событие срабатывает, когда выпадающий список был окончательно скрыт от пользователя (т.е. когда выполнены все CSS стили, необходимые для скрытия выпадающего списка). |
<script type="text/javascript">
$(document).ready(function(){
$(".dropdown-events").on("show.bs.dropdown", function(e){
// Присвоить переменной textMenuItem текст ссылки
var textMenuItem = $(e.relatedTarget).text();
alert("Нажмите на OK для просмотра выпадающего меню для пункта: " + textMenuItem);
});
});
</script>
<ul class="nav nav-pills">
<li class="active"><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li class="dropdown dropdown-events">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Пункт 3
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li class="divider"></li>
<li><a href="#">Подпункт 3</a></li>
</ul>
</li>
<li class="dropdown pull-right dropdown-events">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Пункт 4
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<li class="divider"></li>
<li><a href="#">Подпункт 3</a></li>
</ul>
</li>
</ul>
Menus
Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header
Button Styles
Bootstrap provides different styles of buttons:
Basic
Default
Primary
Success
Info
Warning
Danger
Link
To achieve the button styles above, Bootstrap has the following classes:
The following example shows the code for the different button styles:
Example
<button type=»button» class=»btn»>Basic</button><button type=»button» class=»btn btn-default»>Default</button><button type=»button» class=»btn btn-primary»>Primary</button><button type=»button» class=»btn btn-success»>Success</button><button type=»button» class=»btn btn-info»>Info</button><button type=»button» class=»btn btn-warning»>Warning</button><button type=»button» class=»btn btn-danger»>Danger</button><button type=»button» class=»btn btn-link»>Link</button>
The button classes can be used on an , , or
element:
Example
<a href=»#» class=»btn btn-info» role=»button»>Link Button</a><button type=»button» class=»btn btn-info»>Button</button>
<input type=»button» class=»btn btn-info» value=»Input Button»><input type=»submit» class=»btn btn-info» value=»Submit Button»>
Why do we put a # in the href attribute of the link?Since
we do not have any page to link it to, and we do not want to get a «404»
message, we put # as the link in our examples. It should be a real URL to a
specific page.
Quick start
Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files? Head to the downloads page.
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
Our and include Popper, but not jQuery. For more information about what’s included in Bootstrap, please see our section.
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
Создания выпадающего меню, открывающегося вверх
Вы можете создать выпадающее меню, открывающееся вверх от родительского элемента. Для этого необходимо добавить
дополнительный класс к этому родительскому элементу.
<!-- Кнопки, объединенные в группу с помощью класса .btn-group -->
<div class="btn-group">
<!-- Обычные кнопки -->
<button type="button" class="btn btn-warning">Обычная кнопка</button>
<button type="button" class="btn btn-danger">Обычная кнопка</button>
<!-- Кнопка с выпадающим меню, которое открывается вверх -->
<div class="btn-group dropup">
<button type="button" data-toggle="dropdown" class="btn btn-info dropdown-toggle">
Вверх
<span class="caret"></span>
</button>
<!-- Выпадающее меню -->
<ul class="dropdown-menu">
<!-- Пункты меню -->
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 1</a></li>
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 2</a></li>
<li class="divider"></li>
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 3</a></li>
</ul>
</div>
<!-- Кнопка с выпадающим меню, которое открывается вниз -->
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Вниз
<span class="caret"></span>
</button>
<!-- Выпадающее меню -->
<ul class="dropdown-menu">
<!-- Пункты меню -->
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 1</a></li>
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 2</a></li>
<li class="divider"></li>
<li><a href="lessons/bootstrap-3/98-bootstrap-3-dropdown-lists#samples">Пункт 3</a></li>
</ul>
</div>
</div>
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
How To Style Loading Buttons
Step 1) Add HTML:
Add an icon library, such as Font Awesome, and append icons to HTML buttons:
Example
<!— Add icon library —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><!— Add font awesome icons to buttons (note that the fa-spin class
rotates the icon) —><button class=»buttonload»> <i class=»fa fa-spinner fa-spin»></i>Loading
</button><button class=»buttonload»> <i class=»fa fa-circle-o-notch
fa-spin»></i>Loading</button><button class=»buttonload»> <i
class=»fa fa-refresh fa-spin»></i>Loading</button>
Step 2) Add CSS:
Example
/* Style buttons */.buttonload {
background-color: #4CAF50; /* Green background */
border: none; /* Remove borders */ color: white; /*
White text */ padding: 12px 16px; /* Some padding */ font-size: 16px /* Set a font size */
}
Tip: Go to our Icons Tutorial to learn more about icons.
Tip: Go to our How To — CSS Loader to learn how to create a loader with CSS (without an icon library).
Go to our CSS Buttons Tutorial to learn
more about how to style buttons.
❮ Previous
Next ❯
Important globals
Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
HTML5 doctype
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Responsive meta tag
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your .
You can see an example of this in action in the .
Box-sizing
For more straightforward sizing in CSS, we switch the global value from to . This ensures does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
With the above snippet, nested elements—including generated content via and —will all inherit the specified for that .
Learn more about box model and sizing at CSS Tricks.
Normalize.css
For improved cross-browser rendering, we use Normalize.css to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with Reboot.
Buttons
Both the w3-button class and the w3-btn
class add button-behavior to any HTML elements.
The most common elements to use are
<input type=»button»>, <button>, and <a>:
Example
<input class=»w3-button w3-black» type=»button» value=»Input Button»>
<button class=»w3-button w3-black»>Button Button</button>
<a href=»https://www.w3schools.com» class=»w3-button w3-black»>Link Button</a>
<input class=»w3-btn w3-black» type=»button» value=»Input Button»>
<button class=»w3-btn w3-black»>Button Button</button>
<a href=»https://www.w3schools.com» class=»w3-btn w3-black»>Link Button</a>
How To Center Vertically AND Horizontally
Example
<style>.container { height: 200px; position:
relative; border: 3px solid green; }.center { margin: 0;
position: absolute; top: 50%; left: 50%; -ms-transform:
translate(-50%, -50%); transform: translate(-50%, -50%);}</style><div
class=»container»> <div class=»center»>
<button>Centered Button</button> </div></div>
You can also use flexbox to center things:
Example
.center { display: flex; justify-content: center;
align-items: center; height: 200px; border: 3px solid
green; }
Tip: Go to our CSS Align Tutorial to learn
more about aligning elements.
Tip: Go to our CSS Transform Tutorial to learn
more about how to scale elements.
Tip: Go to our CSS Flexbox Tutorial to learn
more flexbox.
How To Style Round Buttons
Step 1) Add HTML:
Example
<button class=»button button1″>2px</button><button class=»button
button2″>4px</button><button class=»button button3″>8px</button>
<button class=»button button4″>12px</button><button class=»button
button5″>50%</button>
Step 2) Add CSS:
Add rounded corners to a button with the property:
Example
.button { background-color: #4CAF50; border: none; color: white;
padding: 20px; text-align: center;
text-decoration: none; display: inline-block; font-size: 16px;
margin: 4px 2px;}.button1 {border-radius: 2px;}.button2
{border-radius: 4px;}.button3 {border-radius: 8px;}.button4
{border-radius: 12px;}.button5 {border-radius: 50%;}
Go to our CSS Buttons Tutorial to learn
more about how to style buttons.
❮ Previous
Next ❯
How To Create a Button Group
Step 1) Add HTML:
<div class=»btn-group»> <button>Apple</button>
<button>Samsung</button> <button>Sony</button></div>
Step 2) Add CSS:
.btn-group button { background-color: #4CAF50; /* Green
background */ border: 1px solid green; /* Green border
*/ color: white; /* White text */ padding: 10px
24px; /* Some padding */ cursor: pointer; /*
Pointer/hand icon */ float: left; /* Float the
buttons side by side */}.btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */}/* Clear floats (clearfix hack) */.btn-group:after {
content: «»; clear: both; display:
table;}/* Add a background color on hover */.btn-group button:hover { background-color: #3e8e41;}
More
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements
Отключенные кнопки
Bootstrap предлагает определённые стили для состояния disabled (а также для других состояний, например, active). Если нужно отключить кнопку, которая использует элемент <a>, вы можете добавить класс .disabled.
Не нужно делать это на кнопках, сделанных через элементы <button> и <input>. Чтобы отключить такие кнопки воспользуйтесь стандартным атрибутом disabled в HTML.
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<p><a href=»#» class=»btn btn-primary btn-lg disabled» role=»button»>Элемент a</a></p>
<p><button type=»button» class=»btn btn-lg btn-primary» disabled=»disabled»>Элемент button</button></p>
<p><input type=»button» class=»btn btn-lg btn-primary» disabled=»disabled» value=»Элемент input»></p>
Bootstrap использует pointer-events: none для отключения кнопок-ссылок (таких кнопок, которые созданы с помощью элемента <a>). Это работает в большинстве случаев, но не во всех. Следовательно, вы также должны использовать JavaScript, чтобы отключить функциональность кнопок-ссылок (или при возможности просто воспользоваться элементом <button>).
Button Shapes
Normal
Round
Rounder
and Rounder
and Rounder
Normal
Round
Rounder
and Rounder
and Rounder
The w3-round-size classes are used to add rounded
borders to buttons:
Example
<button class=»w3-button w3-round»>Round</button>
<button class=»w3-button w3-round-large»>Rounder</button>
<button class=»w3-button w3-round-xlarge»>and Rounder</button>
<button class=»w3-button w3-round-xxlarge»>and Rounder</button>
<button class=»w3-btn w3-round»>Round</button>
<button class=»w3-btn w3-round-large»>Rounder</button>
<button class=»w3-btn w3-round-xlarge»>and Rounder</button>
<button class=»w3-btn w3-round-xxlarge»>and Rounder</button>
Неактивное состояние
Сделайте кнопки которые выглядят не активно, добавив логический атрибут к любому элементу.
Внимание! IE9 и ниже отрисовка кнопок отключен с серым, тени текста, который мы не можем обойти. Primary button
Button
Primary button
Button
Кнопки отключить с помощью элемент вести себя немного по-другому:
- не поддерживают атрибут, так что вы должны добавить класса, чтобы сделать его визуально отключены.
- Некоторые будущие чистые стили, чтобы отключить все на кнопки якорь. В браузерах, которые поддерживают это свойство, Вы не увидите курсор отключен вообще.
- Кнопок отключен должен содержать атрибут указать состояние элемента для вспомогательных технологий.
Ссылка функционального пояснения
класса попробовать отключить функциональность ссылке из , но что CSS собственность еще не стандартизировано. Кроме того, даже в браузерах, которые поддерживают , навигация с помощью клавиатуры остается в силе, это означает, что зрячие пользователи клавиатуры и пользователи технологий будут по-прежнему сможете активировать эти ссылки. Так, чтобы быть безопасным, добавить атрибут по этим ссылкам, (чтобы предотвратить их от получать фокус клавиатуры) и использовать настраиваемые JavaScript отключить их функциональность.
Button bars can easily be used as navigation bars:
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Example
<div class=»w3-bar w3-black»> <button class=»w3-bar-item
w3-button»>Button</button> <button class=»w3-bar-item
w3-button»>Button</button> <button class=»w3-bar-item
w3-button»>Button</button></div>
The size of each items can be defined by using style=»width:»:
Button
Button
Button
Example
<div
class=»w3-bar»> <button class=»w3-bar-item w3-button»
style=»width:33.3%»>Button</button> <button class=»w3-bar-item w3-button
w3-teal» style=»width:33.3%»>Button</button> <button
class=»w3-bar-item w3-button w3-red» style=»width:33.3%»>Button</button></div>
You will learn more about navigation later in this tutorial.
Button Styles
Bootstrap 4 provides different styles of buttons:
Basic
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Link
Example
<button type=»button» class=»btn»>Basic</button><button type=»button» class=»btn btn-primary»>Primary</button><button type=»button» class=»btn btn-secondary»>Secondary</button><button type=»button» class=»btn btn-success»>Success</button><button type=»button» class=»btn btn-info»>Info</button><button type=»button» class=»btn btn-warning»>Warning</button><button type=»button» class=»btn btn-danger»>Danger</button>
<button type=»button» class=»btn btn-dark»>Dark</button><button
type=»button» class=»btn btn-light»>Light</button><button type=»button» class=»btn btn-link»>Link</button>
The button classes can be used on , , or
elements:
Example
<a href=»#» class=»btn btn-info» role=»button»>Link Button</a><button type=»button» class=»btn btn-info»>Button</button>
<input type=»button» class=»btn btn-info» value=»Input Button»><input type=»submit» class=»btn btn-info» value=»Submit Button»>
Community
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
- Follow @getbootstrap on Twitter.
- Read and subscribe to The Official Bootstrap Blog.
- Join the official Slack room.
- Chat with fellow Bootstrappers in IRC. On the server, in the channel.
- Implementation help may be found at Stack Overflow (tagged ).
- Developers should use the keyword on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.
Создание форм в Bootstrap
Платформа Bootstrap 3 содержит глобальные стили и классы, которые предназначены для оформления HTML форм и
индивидуальных элементов управления.
Глобальные стили представляют собой определённые CSS правила, которые определяют внешний вид элементов управления на
веб-странице. Эти стили элементы управления получают автоматически, и веб-разработчику их явно задавать не требуется.
В Twitter Bootstrap 3 основная задача для веб-разработчика в основном сводится в добавлении необходимых классов для
элементов управления, форм и контейнеров.
Основные моменты при создании и оформлении формы представим в виде следующих этапов:
- Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса),
горизонтальная () и в одну строку (). - Добавить к необходимым текстовым элементам управления , ,
класс , чтобы установить им ширину, равную 100% (всю
доступную ширину родительского элемента). - Поместить каждую надпись () и элемент управления в контейнер …
с классом . Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.
Button Outline
Bootstrap 4 provides eight outline/bordered buttons:
Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
Example
<button type=»button» class=»btn btn-outline-primary»>Primary</button>
<button type=»button» class=»btn btn-outline-secondary»>Secondary</button>
<button type=»button» class=»btn btn-outline-success»>Success</button>
<button type=»button» class=»btn btn-outline-info»>Info</button><button
type=»button» class=»btn btn-outline-warning»>Warning</button><button
type=»button» class=»btn btn-outline-danger»>Danger</button>
<button type=»button» class=»btn btn-outline-dark»>Dark</button><button
type=»button» class=»btn btn-outline-light text-dark»>Light</button>
Disabled Buttons
Buttons stand out with a shadow effect and the cursor turns into a hand when mousing over them.
Disabled buttons are opaque (semi-transparent) and display a «no parking sign»:
Button
Disabled
Button
Disabled
The w3-disabled class is used to create a disabled button
(if the element support the standard HTML disabled attribute, you can use the
disabled attribute instead):
Example
<a class=»w3-button w3-disabled» href=»https://www.w3schools.com»>Link Button</a>
<button class=»w3-button» disabled>Button</button>
<input type=»button» class=»w3-button» value=»Button» disabled>
<a class=»w3-btn w3-disabled» href=»https://www.w3schools.com»>Link Button</a>
<button class=»w3-btn» disabled>Button</button>
<input type=»button» class=»w3-btn» value=»Button» disabled>
Full-width Buttons
To create a full-width button, add the w3-block class to the button.
Full-width buttons have a width of 100%, and spans the entire width of the parent element:
Button
Button
Button
Button
Button
Button
Example
<button class=»w3-button w3-block»>Button</button>
<button class=»w3-button w3-block w3-teal»>Button</button>
<button class=»w3-button w3-block w3-red w3-left-align»>Button</button>
<button class=»w3-btn w3-block»>Button</button>
<button class=»w3-btn w3-block w3-teal»>Button</button>
<button class=»w3-btn w3-block w3-red w3-left-align»>Button</button>
Tip: Align the button text with the w3-left-align
class or the w3-right-align class.
The size of the a block can be defined using style=»width:».
Button
Button
Button
Example
<button class=»w3-button w3-block w3-black»
style=»width:30%»>Button</button>
<button class=»w3-button w3-block w3-teal» style=»width:50%»>Button</button>
<button class=»w3-button w3-block w3-red» style=»width:80%»>Button</button>
Quick start
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? Head to the downloads page.
Copy-paste the stylesheet into your before all other stylesheets to load our CSS.
Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing tag. Be sure to place jQuery and Tether first, as our code depends on them. While we use jQuery’s slim build in our docs, the full version is also supported.
And that’s it—you’re on your way to a fully Bootstrapped site. If you’re at all unsure about the general page structure, keep reading for an example page template.
Menus
Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header
Menus
Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header
Классы групп кнопок
Приведенные ниже классы могут использоваться для <a>, <button>, Или <input> Элементы:
| Класса | Описание | |
|---|---|---|
| .btn-group | Группирует кнопки вместе в одной строке | |
| .btn-group-justified | Делает группу кнопок, охватывающих всю ширину экрана | |
| .btn-group-lg | Большая группа кнопок (делает все кнопки в группе кнопок больше-увеличенный размер шрифта и заполнение) | |
| .btn-group-sm | Малая группа кнопок (делает все кнопки в группе кнопок меньше) | |
| .btn-group-xs | Экстренная малая группа кнопки (делает все кнопки в группе кнопки экстренной малой) | |
| .btn-group-vertical | Заставляет группу кнопок отображаться вертикально в сложенном виде |
❮ Назад
Дальше ❯
