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

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

Материал из Chameleon Test
Перейти к:навигация, поиск
(Examples)
Строка 8: Строка 8:
 
</div>
 
</div>
 
== Available glyphs ==
 
== Available glyphs ==
[[Glyphicons]]
+
See [[Glyphicons]].
  
 
== Examples ==
 
== Examples ==
Строка 22: Строка 22:
 
=== Example 2 ===
 
=== Example 2 ===
 
{{ex|Dropdowns|Example (2)|wiki=mod|html=mod|orig=partial|origshow=exec|orignote=Разобраться, почему показывает исходник (может, и правильно? ) }}
 
{{ex|Dropdowns|Example (2)|wiki=mod|html=mod|orig=partial|origshow=exec|orignote=Разобраться, почему показывает исходник (может, и правильно? ) }}
 +
 +
== Aligment ==
 +
{{ex|Dropdowns|Aligment|wiki=mod|html=mod|orig=partial}}
  
 
== Headers, Divider, Disabled menu items ==
 
== Headers, Divider, Disabled menu items ==
{{ex|Dropdowns|Headers, Divider, Disabled menu items}}
+
{{ex|Dropdowns|Headers, Divider, Disabled menu items|wiki=mod|html=mod|orig=partial}}}}
  
  
  
 
</div> <!-- mw-collapsible -->
 
</div> <!-- mw-collapsible -->

Версия 18:05, 19 июня 2015

Available glyphs

See 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

mod 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>

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

Raw HTML ,   modified 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 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 (2) ( edit )

Разобраться, почему показывает исходник (может, и правильно? )

Raw HTML ,   original code

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>


Aligment

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Aligment ( forkedit original )

Wiki markup ,   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 dropdown-menu-right">
    <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>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Aligment/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 dropdown-menu-right">
    <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/Aligment ( 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 dropdown-menu-right">
    <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

mod 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>

mod HTML:Ex:Getbootstrap.com/components/Dropdowns/Headers, Divider, Disabled menu items/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="false">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu corr-plainlist">
    <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>

partial HTML:Ex:Getbootstrap.com/components/Dropdowns/Headers, Divider, Disabled menu items ( 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="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>

}}