移动端注册登录

所属分类:UI-布局

 10518  61  查看评论 (8)
移动端注册登录 ie兼容8

表单集

<div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
          <input placeholder="占位提示" id="first_name" type="text" class="validate">
          <label for="first_name">姓名</label>
        </div>
        <div class="input-field col s6">
          <input id="last_name" type="text" class="validate">
          <label for="last_name">爱好</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input disabled value="我不能输入" id="disabled" type="text" class="validate">
          <label for="disabled">禁用</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="password" type="password" class="validate">
          <label for="password">密码</label>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">邮件</label>
        </div>
      </div>
      <div class="row">
        <div class="col s12">
          这是一行输入文本:
          <div class="input-field inline">
            <input id="email" type="email" class="validate">
            <label for="email" data-error="wrong" data-success="right">邮件</label>
          </div>
        </div>
      </div>
    </form>
  </div>

弹出

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn" href="#modal1">模态</a> <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>模态标题</h4>
      <p>一堆文本</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">同意</a>
    </div>
  </div>
  //jQuery 插件初始化使用触发器开启模态:
  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal').modal();
  });

你也可以通过程序打开模态,下面的代码将使你模态打开。

 $('#modal1').modal('open');

你也可以通过程序关闭模态:

$('#modal1').modal('close');
相关插件-布局

简介清爽的bootsrap模板

美观的bootsrap前端模板,团队介绍,大屏滚动展示
  布局
 18626  352

Arcticsunset模版

Bootstrap Arcticsunset模版
  布局
 5276  61

jQuery响应式购物商城模板

响应式简洁大气的购物商城网站模板
  布局
 6080  55

metro风格html5+css3后台管理

metro风格html5+css3后台管理
  布局
 16223  47

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    Seacity 0
    2018/3/13 21:50:00
    -透明人- 0
    2018/3/7 21:50:24
    苹果浏览器不支持 回复
    心新星 0
    2018/1/23 17:13:15

    这个可以用在手机上??

        深藏blue0
        2018/1/23 17:14:19

        PC移动都可以

    回复
    老猫 0
    2017/12/11 13:45:47
    老猫 0
    2017/12/11 13:45:11
    せん へきけい 0
    2017/11/3 14:15:02
    不错的
        ☆★☆★☆0
        2017/11/19 18:07:52

        哼好

    回复
取消回复