Web前端 — Bootstrap(6)
Bootstrap本次知识点
1.按钮组件
2.输入框
1. 按钮组件
(1)基本按钮组件
<div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div>
(2)按钮工具栏
<div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <div class="btn-group"> <button class="btn btn-default">更多</button> </div> </div>
(3)按钮的大小
<div class="btn-group btn-group-lg"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <div class="btn-group btn-group-sm"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div> <div class="btn-group btn-group-xs"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <button class="btn btn-default">right</button> </div>
(4)嵌套
<div class="btn-group"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </div> </div>
(5)垂直的按钮组
<div class="btn-group-vertical"> <button class="btn btn-default">left</button> <button class="btn btn-default">middle</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </div> </div>
(6)两端对齐排列的按钮组
<div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-default">left</button> </div> <div class="btn-group"> <button class="btn btn-default">middle</button> </div> <div class="btn-group"> <button class="btn btn-default">right</button> </div> </div> <div class="btn-group btn-group-justified"> <!--<div class="btn-group">--> 为了浏览器兼容问题使用btn-group包裹 <a href="" class="btn btn-default">left</a> <!--</div>--> <!--<div class="btn-group">--> <a href="" class="btn btn-default">middle</a> <!--</div>--> <!--<div class="btn-group">--> <a href="" class="btn btn-default">right</a> <!--</div>--> </div>
(7)按钮式下拉菜单
<1>单按钮下拉菜单
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">html</a></li> <li><a href="">javascript</a></li> <li><a href="">jQuery</a></li> </ul> </div>
<2>分裂式按钮下拉菜单
<div class="btn-group"> <button class="btn btn-default">Default</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">html</a></li> <li><a href="">javascript</a></li> <li><a href="">jQuery</a></li> </ul> </div>
<3>按钮下拉菜单的大小
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">html</a></li> <li><a href="">javascript</a></li> <li><a href="">jQuery</a></li> </ul> </div>
<4>向上弹出式菜单
<div class="btn-group dropup"> <button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">html</a></li> <li><a href="">javascript</a></li> <li><a href="">jQuery</a></li> </ul> </div>
2.输入框
(1)基本的输入框组
<form action=""> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"/> </div> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"/> <span class="input-group-addon">.00</span> </div> </form>
(2)输入框组的大小
<form action=""> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control"/> </div> </form>
(3)复选框和单选框的插件
<form action=""> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"/> </span> <input type="text" class="form-control"/> </div> </div> </div> </form>
(4)按钮插件
<form action=""> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">Go</button> </span> <input class="form-control" type="text"/> </div> </div> </div> </form>
(5)按钮式下拉菜单
<form action=""> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">资讯</a></li> <li><a href="">新闻</a></li> <li><a href="">关于</a></li> </ul> </div> <input class="form-control" type="text"/> </div> </div> </div> </form>
(6)分列式按钮下拉菜单
<form action=""> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default">dropdown</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">资讯</a></li> <li><a href="">新闻</a></li> <li><a href="">关于</a></li> </ul> </div> <input class="form-control" type="text"/> </div> </div> </div> </form>
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/80451109
本文为Roger_CoderLife的原创文章,著作权归作者所有,转载请注明原文出处,欢迎转载!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
linux下搭建服务器环境
一、在linux环境下要运行java程序需要java运行环境 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 新建目录:mkdir /usr/local/java 解压:tar -zxvf jdk-7u65-linux-i586.tar.gz -C usr/local/java/ 查看系统自带jdk:java -version 卸载自带jdk:rpm-qa | grep jdk;rpm -e -nodeps ... 配置环境变量 vi /etc/profile export JAVA_HOME=/usr/local/java/jdk1.7.0_65 export PATH=$PATH:$JAVA_HOME/bin source /etc/profile java -version 看到java版本信息即配置成功。 二、mysql数据库解压安装 wget https://dev.mysql.com/downloads/file/?id=468980 解压:tar -xvf mysql-5.6....
- 下一篇
教程:用强化学习玩转恐龙跳跳
DeepMind在2013年发表了一篇题为《用深度强化学习玩Atari》的文章,介绍了一种新的用于强化学习的深度学习模型,并展示了它仅使用原始像素作为输入来掌握Atari 2600计算机游戏难度控制策略的能力。在本教程中,我将使用Keras实现本文。我们将从增强学习的基础开始,然后深入代码中进行实践性的理解。 AI玩游戏 我在2018年3月初开始了这个项目,并取得了一些不错的成果。但是,只有CPU的系统是学习更多功能的瓶颈。强大的GPU极大地提升了性能。 在我们运行模型之前,我们需要了解许多步骤和概念。 步骤: 在浏览器(JavaScript)和模型(Python)之间构建双向接口 捕获和预处理图像 训练模型 评估 源代码:https://github.com/Paperspace/DinoRunTutorial.git 入门 要按照原样训练和玩游戏,
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS6,CentOS7官方镜像安装Oracle11G