Fassen Sie die Anwendungsbeispiele des Bootstrap-Front-End-Frameworks zusammen

零下一度
Freigeben: 2017-06-24 14:16:45
Original
2347 Leute haben es durchsucht

1. Bootstrap-Layout

Globaler Stil style.css:

1. Stellen Sie die Hintergrundfarbe des Körpers ein weiß

3. Legen Sie die Grundschriftart, Schriftgröße und Zeilenhöhe für den Schriftsatz fest

4. Legen Sie die globale Linkfarbe fest. Der Unterstreichungsstil wird nur angezeigt, wenn der Link schwebend ist „:hover“-Status

Überschrift h1-h6

Alle Überschriften-Tags in HTML,

bis

können verwendet werden. Darüber hinaus werden .h1- bis .h6-Klassenselektoren bereitgestellt, um dem Text von Inline-Attributen Titelstile zu verleihen.

1. Die Werte von margin-top und margin-bottom wurden zurückgesetzt

2 von h4~h6 sind alle 20px.

3. Die Zeilenhöhe aller Titel beträgt 1,1 (d. h. das 1,1-fache der Schriftgröße), und die Textfarbe und Schriftart erben die Farbe und Schriftart von übergeordnetes Element

4. Verschiedene Stufen der Titelschriftgröße, h1=36px, h2=30px, h3=24px, h4=18px, h5=14px und h6=12px

Sie können auch Fügen Sie das

-Tag ein oder geben Sie ihm die .small-Klasse im Titelelement, die zum Markieren von Untertiteln verwendet werden kann.

Bootstrap-Überschrift Sekundärtext
<h2>Bootstrap heading <small>Secondary Text</small></h2>
Nach dem Login kopieren

p-Tag

(Absatz) Das Element wird außerdem mit einem unteren Rand von 10 Pixel festgelegt.

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Nach dem Login kopieren
Absätze können durch Hinzufügen der .lead-Klasse hervorgehoben werden.

<br/>Nullam quis risus eget urna mollis ornare vel eu lion Nullam id dolor id nibh ultricies vehicula. ><br/> <br/><br/> </p><h3>Schwerpunkt auf verwandte Klassen</h3><p></p>Textausrichtungsstil<p></p><p>Liste </p><p>1. ul , ol <span style="color:red;">Desequenz</span>:</p><p></p>2. color:red;"&gt ;Horizontale Anordnung</span> (Ändern Sie die vertikale Liste in eine horizontale Liste, entfernen Sie die Aufzählungszeichen (Zahlen) und behalten Sie die horizontale Anzeige bei) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs applescript">text-muted:  提示,使用浅灰色(#999)text-primary:主要,使用蓝色(#428bca)text-success:成功,使用浅绿色(#3c763d)text-info:   通知信息,使用浅蓝色(#31708f)text-warning:警告,使用黄色(#8a6d3b)text-danger: 危险,使用褐色(#a94442)
Nach dem Login kopieren

3. dl horizontale Liste (Wenn der Bildschirm größer als 768 Pixel ist, fügen Sie den Klassennamen „.dl-horizontal“ hinzu, um den horizontalen Definitionslisteneffekt zu erzielen.)
text-left:   左对齐
text-center: 居中对齐
text-right:  右对齐
text-justify:两端对齐
Nach dem Login kopieren

Bild

Die Verwendung ist sehr einfach hinzufügen
class=“list-unstyled“
Nach dem Login kopieren

class=“list-inline”
Nach dem Login kopieren
Fügen Sie den entsprechenden Klassennamen zum Tag hinzu

img-responsive: responsives Bild, hauptsächlich für responsives Design

class=“dl-horizontal”
Nach dem Login kopieren

Fügen Sie es selbst hinzu und überprüfen Sie das entsprechender Effekt~ ~ ~

Bootstrap-Symbole

Das Bootstrap-Framework stellt Ihnen außerdem fast 200 verschiedene Symbolbilder zur Verfügung, und diese Symbole sind alle Symboleffekte, die das @font-face-Attribut von CSS3 verwenden Kombination mit Schriftarten.

Jedes Element auf Zeilenebene kann verwendet werden, normalerweise wird das Span-Tag als Symbolcontainer verwendet.

Kann auf der Bootstrap-Website angezeigt werden ;span>
img-rounded:   圆角图片
img-circle:    圆形图片
img-thumbnail: 缩略图片
Nach dem Login kopieren

Die Verwendung ist sehr einfach. Kopieren Sie einfach das Englisch unter dem Symbol und fügen Sie es in die Klasse ein:

2. Bootstrap-Tabelle

Basisinstanz

<span class="glyphicon glyphicon-ok"></span>
Nach dem Login kopieren
Striped Table

Mit der Klasse .table-striped können Sie jeder Zeile Zebrastreifen hinzufügen innerhalb des

Die gestreifte Tabelle basiert auf dem CSS-Selektor :nth-child, der von Internet Explorer 8 nicht unterstützt wird.

<table class="table"></table>
Nach dem Login kopieren
Bordered table

Fügen Sie die Klasse .table-bordered hinzu, um der Tabelle und jeder darin enthaltenen Zelle Rahmen hinzuzufügen.

Mouseover
Sie können dafür sorgen, dass jede Zeile in auf den Mouseover-Status reagiert, indem Sie die Klasse .table-hover hinzufügen.

Komprimierte Tabelle

Durch Hinzufügen der Klasse .table-confided kann die Tabelle kompakter gemacht werden und der Abstand in den Zellen wird halbiert.

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色.success    标识成功或积极的动作.info        标识普通的提示信息或动作.warning    标识警告或需要用户注意.danger        标识危险或潜在的带来负面影响的动作
Nach dem Login kopieren

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>
Nach dem Login kopieren

3、bootstrap表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列。

<form role="form">告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单</form><form role="button">告诉设备,这是个按钮,可以点击。本质上是增强语义性,增强组件的可访问性、可用性</form>
Nach dem Login kopieren

不要将表单组合输入框组混合使用,建议将输入框组嵌套到表单组中使用。

<form>
      <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
       </div>
       <div class="form-group">
             <label for="exampleInputPassword1">Password</label>
             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
       <div class="form-group">
          <label for="exampleInputFile">File input</label>
             <input type="file" id="exampleInputFile">
           <p class="help-block">Example block-level help text here.</p>
     </div>
       <div class="checkbox">
             <label>
               <input type="checkbox"> Check me out
             </label>
      </div>
       <button type="submit" class="btn btn-default">Submit</button>
</form>
Nach dem Login kopieren

多个控件可以排列在同一行:

<form class="form-inline">
      <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
     <button type="submit" class="btn btn-default">Send invitation</button>
</form>
Nach dem Login kopieren

水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

单选和多选框

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的

多选框:

<div class="checkbox">      <label>          <input type="checkbox" value="">
        Option one is this and that—be sure to include why it&#39;s great       </label></div>
<div class="checkbox disabled">      <label><input type="checkbox" value="" disabled>
            Option two is disabled      </label></div>
Nach dem Login kopieren

单选框:

<div class="radio">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
</div>
<div class="radio disabled">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            Option three is disabled
      </label>
</div>
Nach dem Login kopieren

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。

参考博文:bootstrap框架怎么用?

Das obige ist der detaillierte Inhalt vonFassen Sie die Anwendungsbeispiele des Bootstrap-Front-End-Frameworks zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage