帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Bootstrap边框浮动动画样式

帝国模板之家 2020-12-23 网页特效 评论

插件介绍

一款专为Bootstrap框架设计的浮动标签边框样式解决方案,使用纯CSS构建。不仅支持文本框(输入和文本区域),该插件还可以与select元素一起使用。 使标签元素在聚焦时浮动在其关联的窗体控件的顶部。

兼容的浏览器

Chrome,IE9 +,FireFox,Opera,Safari

使用方法

1. 在bootstrap项目中添加浮动加载样式表。

<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="floating-labels.css" />

2. 将浮动标签和表单控件一起插入CSS类为“form label group”的容器中。

<!-- Input Field -->

<div class="form-label-group">
  <input type="text" id="ex1" placeholder="Floating Label" />
  <label for="ex1">Floating Label</label>
</div>

<!-- Textarea -->
<div class="form-label-group">
  <textarea id="ex2" placeholder="Floating Label area"></textarea>
  <label for="ex2">Floating Label</label>
</div>

<!-- Select Box -->
<div class="form-label-group">
  <select id="ex3">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="ex3" >Floating Label</label>
</div>

3.使用CSS类'in border'或'outline'类使label元素浮动在上边框,就像materialdesign的表单控件一样。

<div class="form-label-group in-border">
  <input type="text" id="ex1" placeholder="Floating Label" />
  <label for="ex1">Floating Label</label>
</div>

<div class="form-label-group outline">
  <input type="text" id="ex1" placeholder="Floating Label" />
  <label for="ex1">Floating Label</label>
</div>

4. 这个例子展示了如何将浮动标签集成到第三个jQuery插件中,比如intl tel input。

$('.intl-tel-input ~ label').insertAfter('.intl-tel-input input.form-control')
// or
$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
  let label = $(element).parent().find('~ label');
  $(element).after(label);
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言