Résumer les exemples d'utilisation du framework front-end bootstrap

1. Mise en page Bootstrap

Style global style.css :

1. Supprimez l'instruction de marge du corps

2. blanc

3. Définissez la police de base, la taille de la police et la hauteur de ligne pour la composition

4. Définissez la couleur globale du lien et le style de soulignement sera affiché uniquement lorsque le lien est flottant. État ":hover"

Titre h1-h6

Toutes les balises de titre en HTML,

à

peuvent être utilisées. De plus, des sélecteurs de classe .h1 à .h6 sont fournis pour donner des styles de titre au texte des attributs en ligne.

1. Les valeurs de margin-top et margin-bottom ont été réinitialisées

2 Les valeurs de réinitialisation de h1~h3 sont toutes les valeurs de réinitialisation ; de h4~h6 font tous 20px.

3. La hauteur de ligne de tous les titres est de 1,1 (c'est-à-dire 1,1 fois la taille de la police), et la couleur et la police du texte héritent de la couleur et de la police du. élément parent

4. Fixe Différents niveaux de taille de police du titre, h1=36px, h2=30px, h3=24px, h4=18px, h5=14px et h6=12px

Vous pouvez également incluez la balise ou donnez-lui la classe .small dans l'élément title qui peut être utilisée pour marquer les sous-titres.

<h2>Bootstrap heading <small>Secondary Text</small></h2>

Titre Bootstrap Texte secondaire

balise p

(paragraphe) L'élément est également défini avec une marge inférieure de 10 px.

    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.

Les paragraphes peuvent être mis en surbrillance en ajoutant la classe .lead.

<br/>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 ><br/> </p><h3> </h3><p>Emphase sur les classes associées</p><p></p>Style d'alignement du texte<p></p><p>Liste. </p><p>1. ul , ol <span style="color:red;">Déséquence</span>：</p><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）

Copier après la connexion

2. ul , ol (Changez la liste verticale en liste horizontale, supprimez les puces (numéros) et conservez l'affichage horizontal)

text-left：   左对齐
text-center： 居中对齐
text-right：  右对齐
text-justify：两端对齐

3. dl liste horizontale (lorsque l'écran est plus grand que 768px, ajoutez le nom de classe ".dl-horizontal" pour avoir l'effet de liste de définition horizontale)

Image

class=“list-unstyled“

L'utilisation est très simple, il suffit add

class=“list-inline”

Ajoutez le nom de classe correspondant à la balise

class=“dl-horizontal”

img-responsive : image responsive, principalement pour le responsive design

Ajoutez-le vous-même et vérifiez le effet correspondant~ ~ ~

icônes bootstrap

Le framework Bootstrap vous fournit également près de 200 images d'icônes différentes, et ces icônes sont toutes des effets d'icônes qui utilisent l'attribut @font-face de CSS3 dans combinaison avec des polices.

N'importe quel élément au niveau de la ligne peut être utilisé, en utilisant généralement la balise span comme conteneur d'icônes

img-rounded：   圆角图片
img-circle：    圆形图片
img-thumbnail： 缩略图片

Peut être consulté sur le site Web bootstrap ;span>

L'utilisation est très simple, il suffit de copier et coller l'anglais sous l'icône dans la classe :

2. bootstrap-table

Instance de base

<span class="glyphicon glyphicon-ok"></span>

Table rayée

En utilisant la classe .table-striped, vous pouvez ajouter des rayures zébrées à chaque ligne dans le style

<table class="table"></table>

La table rayée repose sur le sélecteur CSS :nth-child, qui n'est pas pris en charge par Internet Explorer 8.

Tableau bordé

Ajoutez la classe .table-bordered pour ajouter des bordures au tableau et à chaque cellule qu'il contient.

Survol de la souris

Vous pouvez faire en sorte que chaque ligne de réponde à l'état de survol de la souris en ajoutant la classe .table-hover.

Tableau condensé

En ajoutant la classe .table-condensed, la table peut être rendue plus compacte et le remplissage dans les cellules sera réduit de moitié.

状态类

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

Class 描述

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

响应式表格

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

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>

3、bootstrap表单

基本实例

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

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

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

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

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

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

水平排列的表单

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

单选和多选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

多选框：

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

单选框：

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!