📜  引导程序(第7部分)|警报,井,分页和寻呼机

📅  最后修改于: 2021-05-25 18:15:14             🧑  作者: Mango

  1. 简介与安装
  2. 网格系统
  3. 按钮,字形图标,表格
  4. 垂直形式,水平形式,内联形式
  5. 下拉菜单和响应式标签
  6. 进度栏和超大屏幕

快讯

我们通常会在完成某项操作之前或之后在某些网站上看到某些警报。这些警报消息是突出显示的文本,在执行过程时要考虑这些文本。 Bootstrap允许我们使用预定义的类在我们的网站上显示这些警报消息。
如何使用引导程序类添加警报消息

  1. 在div元素内,添加一个警报类。
  2. 使用以下类来设置消息框的颜色样式
    绿色–警报成功
    蓝色–警报信息
    黄色–警告
    红色–警告危险
  3. 编写要为警报消息编写的文本,然后关闭div元素。
  Success!
  
  Info!
  
  Warning!
  
  Danger!

输出:

可忽略的警报:要关闭警报消息,您需要在警报中添加斧头图标。要添加图标,请在您的div元素中添加一个alert-dismissable类。然后将class closedata-dismiss =“ alert”添加到链接或按钮,如下所示:

×   Success!
  
×   Info!
  
×   Warning!
  
×   Danger!

输出:

警报链接:要向您的警报消息添加链接,只需在’a’元素内添加一个警报链接类。这将以与警报消息框相同的字体颜色创建一个链接。然后,使用“ a”标签向此类文本添加链接:

  Success! read this message
  
  Info! read this message
  
  Warning! read this message
  
  Danger! read this message

输出:

韦尔斯

一个良好类只是用来增加周围的一些文字与圆角和一些填充一个灰色的框。
要在您的网页中添加井,只需将井类包含在div元素中,然后编写要保留在井中的文本并关闭div标签即可。

This is a Well

输出


孔的大小:孔的默认大小为中等,但是我们可以分别使用类well-lgwell-sm来增加或减少孔的大小。

This is a large Well
This is a small Well

输出

分页

我们都已经看到一个网站上有很多网页,或者当我们在Google上搜索时,在不同的网页上都有很多搜索结果,这些搜索结果以1编号。可以使用引导程序轻松在网站中添加此功能。
用于分页的预定义类是.pagination
要将分页添加到您的网站,请在ul标签内添加分页类,如下所示:

      
  • 1
  •   
  • 2
  •   
  • 3
  •   
  • 4
  •   
  • 5
 

输出

活动页面:要显示活动页面,请使用活动类,如下所示:

      
  • 1
  •   
  • 2
  •   
  • 3
  •   
  • 4
  •   
  • 5
 

输出

禁用页面:要禁用页面进入某个链接,请使用禁用的类,例如:

      
  • 1
  •   
  • 2
  •   
  • 3
  •   
  • 4
  •   
  • 5
 

输出

传呼机

我们所有人都已经在网页上看到“上一个”和“下一个”按钮来导航到其他页面。 Bootstrap提供了一个预定义的类来有效地实现此寻呼机。寻呼机提供链接以移至下一页或上一页。
要将寻呼机添加到您的网页,请在div元素中添加“ pager”类,并提供上一页和下一页的链接,如下所示:


输出

要将这些导航按钮对齐到网页的一侧,请对此类链接使用“上一个”和“下一个”类,

 

输出