Miniatures et fenêtres d'avertissement que Bootstrap doit apprendre chaque jour_compétences javascript

1. Vignette

L'endroit le plus couramment utilisé pour les miniatures sur les sites Web est sur les pages de liste de produits, où plusieurs images sont affichées sur une seule ligne, et certaines ont des titres, des descriptions et d'autres informations sous les images (sur le côté gauche ou droit). Le framework Bootstrap sépare cette partie en un composant de module. Et cela est réalisé grâce au style « miniature » et au système de grille de bootstrap. La page de liste de produits peut être rendue plus belle.

Fichier de code source :

☑ Version MOINS : vignettes du fichier correspondant.less

☑ Version Sass : File_thumbnails.scss correspondant

☑ Version compilée : Ligne 4402~Ligne 4426 du fichier bootstrap.css

Utilisation :

Réalisé grâce au style "vignette" et au système de grille bootstrap.

Comme mentionné précédemment, la mise en œuvre des vignettes est utilisée en conjonction avec le système de grille. Supposons que nous ayons une liste de produits, comme indiqué ci-dessous :

Regardons d'abord la structure :

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail">
        <img src="imgs/a.png" style="width: 100%; display: block;" alt="">
      </a>
    </div>
  …
  </div>
</div>

La structure ci-dessus représente que lorsque l'écran est large (la zone visible est supérieure à 768 pixels), quatre vignettes sont affichées sur une seule ligne (cliquez sur le plein écran pour voir l'effet) :

Sur les écrans étroits (zone visible inférieure à 768 pixels), seules deux vignettes sont affichées sur une seule ligne :

• col-xs-Téléphone portable ultra petit écran (a4c3b794b75ef2142b1b5f20a321b002=768px). BootStrap est divisé en 12 colonnes. Le code ci-dessus indique que toutes les 6 copies (la moitié) sont utilisés lorsque l'écran est extrêmement petit, soit 6, l'écran moyen et grand occupe 3 parties.

  Principe de mise en œuvre :

  La mise en page s'appuie principalement sur le système de grille du framework Bootstrap, et le code de style correspondant à la vignette :

  /Ligne 4402~Ligne 4426 du fichier bootstrap.css/

  .thumbnail {
   display: block;
   padding: 4px;
   margin-bottom: 20px;
   line-height: 1.42857143;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
   -webkit-transition: all .2s ease-in-out;
       transition: all .2s ease-in-out;
  }
  .thumbnail > img,
  .thumbnail a > img {
   margin-right: auto;
   margin-left: auto;
  }
  a.thumbnail:hover,
  a.thumbnail:focus,
  a.thumbnail.active {
   border-color: #428bca;
  }
  .thumbnail .caption {
   padding: 9px;
   color: #333;
  }
  
  

  2. Vignettes complexes

  La section précédente ne montre qu'une seule façon d'utiliser les vignettes. En plus de cette méthode, les vignettes peuvent également être associées à des titres, des descriptions, des boutons, etc. :

  .

  Sur la base uniquement des vignettes, un conteneur div nommé « légende » est ajouté, et d'autres contenus sont placés dans ce conteneur, comme le titre, la description du texte, le bouton, etc. :

  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="imgs/1.jpg" style="height: 180px; width: 100%; display: block;" alt="">
        </a>
        <div class="caption">
          <h3>Bootstrap框架系列教程</h3>
          <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
          <p>
            <a href="##" class="btn btn-primary">开始学习</a>
            <a href="##" class="btn btn-info">正在学习</a>
          </p>
        </div>
      </div>
    …
    </div>
  </div>
  
  

  效果如下：
  

  

  3、警示框

  在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示：

  

  在Bootstrap框架有一个独立的组件，实现上述的效果，这个组件被称为警示框。

  源码版本：

  ☑ LESS版本：对应的源码文件alerts.less

  ☑ Sass版本：对应的源码文件_alerts.scss

  ☑ 编译后的版本：bootstrap.css文件第4427行～第4499行

  4、默认警示框

  Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

  1）、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2）、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3）、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4）、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

  使用方法：

  具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名，如下：

  <div class="alert alert-success" role="alert">恭喜您操作成功！</div>
  <div class="alert alert-info" role="alert">请输入正确的密码</div>
  <div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
  <div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
  
  

  运行效果如下：

  

  实现原理：

  其中“alert”样式的源码主要是设置了警示框的背景色、边框、圆角和文字颜色。另外对其内部几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理：

  /bootstrap.css文件第4427行～第4446行/

  .alert {
   padding: 15px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 4px;
  }
  .alert h4 {
   margin-top: 0;
   color: inherit;
  }
  .alert .alert-link {
   font-weight: bold;
  }
  .alert > p,
  .alert > ul {
   margin-bottom: 0;
  }
  .alert > p + p {
   margin-top: 5px;
  }
  
  

  不同类型的警示框，主要是通过“alert-success”、“alert-info”、“alert-warning”和“alert-danger”样式来实现：

  /bootstrap.css文件第4456行～第4499行/

  .alert-success {
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
  }
  .alert-success hr {
   border-top-color: #c9e2b3;
  }
  .alert-success .alert-link {
   color: #2b542c;
  }
  .alert-info {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
  }
  .alert-info hr {
   border-top-color: #a6e1ec;
  }
  .alert-info .alert-link {
   color: #245269;
  }
  .alert-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
  }
  .alert-warning hr {
   border-top-color: #f7e1b5;
  }
  .alert-warning .alert-link {
   color: #66512c;
  }
  .alert-danger {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
  }
  .alert-danger hr {
   border-top-color: #e4b9c0;
  }
  .alert-danger .alert-link {
   color: #843534;
  }
  
  

  5、可关闭的警示框

  大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

  使用方法：

  只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

  1）、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2）、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

  3）、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

  具体使用如下：

  <div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
  </div>

  运行效果如下：

  

  原理分析：

  在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式，这样就可以实现带关闭功能的警示框。

  /bootstrap.css文件第4447行～第4455行/

  .alert-dismissable {
   padding-right: 35px;
  }
  .alert-dismissable .close {
   position: relative;
   top: -2px;
   right: -21px;
   color: inherit;
  }
  
  

  6、警示框的链接

  有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。

  实现方法：

  Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。

  具体使用如下：

  <div class="alert alert-warning" role="alert">
    <strong>Warning!</strong>
     忘记密码？---><a href="##" class="alert-link">请点击此处</a>
  </div>
  <div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong>
    密码输入错误---><a href="##" class="alert-link">请点击此处找回密码。。</a>
  </div>
  
  

  运行效果如下：

  

  实现原理：

  实现样式如下：

  /bootstrap.css文件第4437行～第4439行/

  .alert .alert-link {
   font-weight: bold;
  }
  
  /不同类型警示框中链接的文本颜色/
  
  .alert-success .alert-link {
   color: #2b542c;
  }
  .alert-info .alert-link {
   color: #245269;
  }
  .alert-warning .alert-link {
   color: #66512c;
  }
  .alert-danger .alert-link {
   color: #843534;
  }
  

  以上就是本文的全部内容，希望对大家的学习有所帮助。