ActiveMQ MongoDB Hibernate less excel process model jQuery Mobile ACE vue全局组件 npm安装vue sql视频教程 springboot单点登录 kafka默认端口 mysql合并结果集 git下载代码到本地命令 bootstrap颜色 css鼠标悬浮样式 cmd清空命令 python环境搭建 python运算符优先级 python中的join函数 javaswitch java案例 java语言学习 java入门课程 java字符串比较 java求阶乘 java字符串匹配 php语言入门 圣骑士装备 ad下载 神剪辑教程 oem修改器 复制到剪贴板 迅雷去广告版 视频修复工具 lol体验服转换器 abr文件 瑞兹技能
当前位置: 首页 > 学习教程  > 

Bootstrap组件:图标 按钮组 输入框组 导航 面板

2020/10/16 17:43:20 文章标签: bootstrap文本框

文章目录图标按钮组输入框组导航面板图标 https://fontawesome.dashgame.com/ 按钮组 <div class"btn-group"><button class"btn btn-primary">添加</button><button class"btn btn-warning">修改</button><…

文章目录

      • 图标
      • 按钮组
      • 输入框组
      • 导航
      • 面板

图标

https://fontawesome.dashgame.com/

按钮组

       <div class="btn-group">
           <button class="btn btn-primary">添加</button>
           <button class="btn btn-warning">修改</button>
           <button class="btn btn-danger">删除</button>
       </div>

输入框组

   <div class="container">
       <div class="input-group">
           <span class="input-group-addon" >@</span>
           <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
           <span class="input-group-addon" >
               <span class="glyphicon glyphicon-triangle-right"></span>
           </span>
       </div>
   </div>

导航

<div class="container">
      <!--nav
               nav-tabs
               nav-pills
              nav-stacked-->
      <ul class="nav nav-stocked">
          <li class="active" ><a href="#">主页</a></li>
          <li><a href="#">主页1</a></li>
          <li><a href="#">主页2</a></li>
      </ul>
  </div>

面包屑导航

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

面板

  • class=“panel-heading” 、class=“panel-body”、class=“panel-footer”

  • class=“panel panel-情景”

ex:class=“panel panel-success”

<div class="container">


      <div class="panel panel-default">

          <div class="panel-heading">
              用户登录
          </div>
          <div class="panel-body">
               主体
          </div>
          
          <div class="panel-footer">
              <button class="btn btn-success">提交</button>
          </div>

      </div>

练习:使用panel、form、btn等bootstrap元素创建登录窗体

先开个头:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            用户登录
        </div>
        <div class="panel-body">
            <form class="form-horizontal"><!--相当于栅格系统中的container-->
                <div class="form-group"><!--相当于栅格系统中的row-->
                    <div class="col-md-8"><!--相当于栅格系统中的col-->
                        <div class="input-group">
                            <span class="input-group-addon">用户名</span>
                            <input class="form-control"/>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button class="btn btn-success">提交</button>
        </div>
    </div>
</div>

本文链接: http://www.dtmao.cc/news_show_300032.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?