定义键盘快捷键 CSS选择器 ASP.NET Core 观察者模式 swift msbuild vue教程入门 git视频 python程序界面 手机banner常用尺寸 mysql批量更新数据 hbase端口 mac脚本编辑器 dwf文件怎么转成dwg mysql建表主键自增长 python3网络编程 python中文文档 python中str函数 stringjava java中的抽象类 java表达式 java使用正则表达式 javaif语句 java单继承 java多线程教程 java字符串格式化 linux安装系统 魔兽世界字体包 exescope教程 微信python退出程序 git命令 list删除指定元素 梦幻手游助手 免费图片文字识别软件 sql2008r2 camworks 接口自动化测试框架 lol游戏环境异常 浣海之核 chrome访问助手
当前位置: 首页 > 学习教程  > 

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_300031.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?