Only registered users can edit. The registration requests please send to nablawiki@gm**l.com

Getbootstrap.com/components — различия между версиями

Материал из Chameleon Test
Перейти к:навигация, поиск
(Новая страница: «<div class=mw-collapsible data-collapsetext="Hide boxes" data-expandtext="Show boxes"> * Getbootstrap.com/components * http://Getbootstrap.com/components <div…»)
 
Строка 1: Строка 1:
 
<div class=mw-collapsible data-collapsetext="Hide boxes" data-expandtext="Show boxes">
 
<div class=mw-collapsible data-collapsetext="Hide boxes" data-expandtext="Show boxes">
 +
* [http://gsp.raczynski.ru/index.php/%D0%A2%D0%B5%D1%81%D1%82:Bootstrap_Design/getbootstrap.com/components gsp]
 
* [[Getbootstrap.com/components]]
 
* [[Getbootstrap.com/components]]
* http://Getbootstrap.com/components
+
* [http://Getbootstrap.com/components getbootstrap]
 +
 
 
<div class="page-header">
 
<div class="page-header">
= Grid system =
+
= Glyphicons =
 
</div>
 
</div>
== Example: Stacked-to-horizontal ==
+
== Available glyphs ==
{{ex|Grid|Stacked-to-horizontal|ok}}
+
[[Glyphicons]]
 +
 
 +
== Examples ==
 +
{{ex|Glyphicon|Example|html=partial|htmlnote=Отличаются от оригинала вертикальным выравниванием и промежутком между рядами}}
 +
 
 +
<div class="page-header">
 +
= Dropdowns =
 +
</div>
 +
Во всех случаях &lt;ul&gt; приходилось дополнять .corr-plainlist
 +
== Examples ==
 +
=== Example 1 ===
 +
{{ex|Dropdowns|Example (1)|wiki=mod|html=mod|orig=partial}}
 +
=== Example 2 ===
 +
{{ex|Dropdowns|Example (2)}}
 +
== Headers, Divider, Disabled menu items ==
 +
{{ex|Dropdowns|Headers, Divider, Disabled menu items}}
 +
 
  
  
 
</div> <!-- mw-collapsible -->
 
</div> <!-- mw-collapsible -->

Версия 17:47, 19 июня 2015

Available glyphs

Glyphicons

Examples

ok HTML:Ex:Getbootstrap.com/components/Glyphicon/Example/wiki ( editedit originalcompare )


Star
Star
Star
Star
Wiki markup ,   modified code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <div type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Center Align">
      <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Right Align">
      <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></div>
    <div type="button" class="btn btn-default" aria-label="Justify">
      <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></div>
  </div>
</div><br>
<div class="btn-toolbar" role="toolbar">
  <div type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
  <div type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</div>
</div>

partial HTML:Ex:Getbootstrap.com/components/Glyphicon/Example ( forkedit original )

Отличаются от оригинала вертикальным выравниванием и промежутком между рядами

Raw HTML ,   original code
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Center Align">
      <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Right Align">
      <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
    <button type="button" class="btn btn-default" aria-label="Justify">
      <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
  </div>
</div>
<div class="btn-toolbar" role="toolbar">
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
  <button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star</button>
</div>


Во всех случаях <ul> приходилось дополнять .corr-plainlist

Examples

Example 1

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1)/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1)/html ( editedit originalcompare )

Raw HTML ,   modified code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

partial HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (1) ( edit )

Raw HTML ,   original code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Example 2

ok HTML:Ex:Getbootstrap.com/components/Dropdowns/Example (2)/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropup">
  <div class="btn btn-default dropdown-toggle" type="button"  
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li>[[#|Another action]]</li>
    <li>[[#|Something else here]]</li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

original code
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Headers, Divider, Disabled menu items

ok HTML:Ex:Getbootstrap.com/components/Dropdowns/Headers, Divider, Disabled menu items/wiki ( editedit originalcompare )

Wiki markup ,   modified code
<div class="dropdown">
  <div class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown <span class="caret"></span></div>
  <ul class="dropdown-menu corr-plainlist">
    <li>[[#|Action]]</li>
    <li class="disabled">[[#|Another action]]</li>
    <li class="dropdown-header">Dropdown header</li>
    <li>[[#|Something else here]]</li>
    <li class="divider"></li>
    <li>[[#|Separated link]]</li>
  </ul>
</div>

original code
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li class="disabled"><a href="#">Another action</a></li>
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>