输入框组，标签页

最新推荐文章于 2024-05-09 13:55:26 发布
最新推荐文章于 2024-05-09 13:55:26 发布
阅读量341 收藏
点赞数
分类专栏： Bootstrap 文章标签： Bootstrap css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxyuan/article/details/76233665
版权 




<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>

	<body style="background-color: gainsboro;">
		<div class="" style="background-color:powderblue;">
			<h2>输入框组</h2>
			<div class="page-header">
				<span class="input-group-addon">$</span>
				<input type="text" class="form-control" placeholder="username" />
				<span class="input-group-addon">.00</span>

			</div>
			<h2 class="page-header">
			选项卡效果
		</h2>
			<ul class="nav nav-tabs">
				<li role="presentation" class="active">
					<a href="#">home</a>
				</li>
				<li>
					<a href="#">profile</a>
				</li>
				<li>
					<a href="#">message</a>
				</li>
			</ul>
			<h2 class="page-header">
			路径导航效果
		</h2>
			<ol class="breadcrumb">
				<li>
					<a href="#">html</a>
				</li>
				<li>
					<a href="#">css</a>
				</li>
				<li>
					<a href="#">ajax</a>
				</li>
				<li>
					<a href="#">jQuery</a>
				</li>
			</ol>
			<h2 class="page-header">
			图片缩略图效果
		</h2>
			<div class="row">
				<div class="col-md-4">
					<a href="#" class="thumbnail "><img src="img/IMG_8421.jpg" height="300px" width="500px"></a>
					<div class="caption">
						<h4>
					html入门	
					</h4>
					</div>
				</div>
				<div class="col-md-4">
					<a href="#" class="thumbnail "><img src="img/IMG_8421.jpg" height="300px" width="500px"></a>
					<div class="caption">
						<h4>
					html入门	
					</h4>
					</div>
				</div>
			</div>
			<h2 class="page-header">
			分页效果
			</h2>
			<div class="text-center">
				<ul class="pagination">
					<li class="active">
						<a href="#">«</a>
					</li>
					<li>
						<a href="#">1</a>
					</li>
					<li>
						<a href="#">2</a>
					</li>
					<li>
						<a href="#">3</a>
					</li>
					<li>
						<a href="#">4</a>
					</li>
					<li>
						<a href="#">5</a>
					</li>
					<li>
						<a href="#">6</a>
					</li>
					<li>
						<a href="#">7</a>
					</li>
				</ul>
			</div>
			<h2 class="page-header">
			导航栏效果
			</h2>
			<nav class="navbar navbar-default">
				<p>导航栏头部信息</p>
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="#">brand</a>
						<p class="navbar-text">欢迎光临</p>
					</div>
				</div>
			
			<h2 class="page-header">
			导航条主连接
			</h2>
			<div class="collapse navbar-collapse" >
				<ul class="nav navbar-nav navbar-left">
					<li class="active"> <a href="#">起步</a></li>
					<li> <a href="#">全局样式</a></li>
					<li> <a href="#">组件</a></li>
					<li> <a href="#">插件</a></li>
					<li> <a href="#">案例</a></li>
				</ul>
			
			<h2 class="page-header">
			导航条中的表单
			</h2>
			<form class="navbar-form navbar-left">
				<div class="form-group">
					<input type="text" class="form-control"  placeholder="search"/>
				</div>
				<button type="button" class="btn btn-danger">search</button>
			</form>
			</div>
			</nav>
		</div>
	</body>

</html>





boxyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flatlab bootstrap静态页面模板
01-13
Flat UI是一款基于Bootstrap的扁平化前端UI工具包，Flat UI的组件外观设计非常清新和漂亮，Flat UI的组件包含按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块等精美的元素。
Bootstrap组件——输入框
xun__xing的博客
07-30 2234
输入框一、输入框1.基本2.尺寸3.多选框和单选框4.多个输入框与多个额外组件5.按钮组合6.带下拉列表的按钮组合7.分离式按钮8.自定义表单组合9.自定义文件 一、输入框 1.基本 <div class="form-row"> <div class="col"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="in
前端基础之《Bootstrap（7）—CSS组件_输入框组和导航》
csj50的专栏
11-04 413
2、为input添加额外元素（.input-group-addon）3、input-group大尺寸（.input-group-lg）4、input-group小尺寸（.input-group-sm）5、为输入框组添加按钮（.input-group-btn）1、输入框组（.input-group）
移动端输入框填坑系列
Jack, what else can you do besides holding your little darling?
11-05 449
背景 需求预沟通 产品：我们需要做一个 IM，和微信一样 我：打扰了，走错片场了，你们继续，，，，，，， .... 我：这个需求虽然不合理，但是我还是接了。。。。。。 输入框 来来来，我们来想一下我们一天中使用频率最高的 App——微信，英文名是 WeChat，它的聊天界面长啥样子，输入框在最底部（不知道你什么反应，我反正当场就打开了 weibo，facebook， twitter 等等等的 mobile 端，就没有一个是把输入框放在最底部的，好的，我当场就对产品发动了强烈的反抗，当然依旧没
Bootstrap包括输入框组、导航、分页、标签、徽章
热门推荐
Army-海军的博客
05-18 1万+
1.输入框组 <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-g
vue+element UI 实战点击按钮添加一组输入框
qq_44811609的博客
12-29 5047
点击添加实验组 ，添加一组输入框,点击减号删除一组输入框 <el-button type="primary" style="margin-left:30px" @click="addItem">添加实验组</el-button> <div class="form" v-show="dialogForm" v-for="(item,index) in List" :key=...
Bootstarp（三）—导航栏、表单、表单控件、输入框组
猫与故巷的博客
05-17 493
表单 表单控件 输入框组 轮播 模态框 提示框 弹出框
Semantic UI 之 输入框 input
哈
08-08 915
第一步：创建项目 添加JQuery和Semantic UI包、创建input.html页面： 第二步：container.html页面 在container.html页面中引入样式文件和JS文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按钮</title> <link rel
不同类型的输入框与8大设计重点
10-22 395
输入框几乎每天都会接触到，但是看似简单的输入框，你真的会设计吗？ 输入框的组成部分 输入框包含的内容有三种：载体、文本、图标，细分下来是这样的： l文本：包含标题，占位符，帮助，反馈； l载体：文本框； l图标：展示型图标，操作型图标，反馈型图标。 ​ 不同类型的输入框组合 组合一：文本框与标题组合 组合能确保用户知道需要在文本框中输入什么信息，虽然看起来很简单，但排版上需要注意多列内容如何正确展示，涉及到用户的眼动行为。 ...
Android开发之输入框EditText
weixin_44548736的博客
06-18 393
现在先简单介绍一下技术点： 1.如何使用圆角输入框和按钮背景 2.如何实现“手机号”、“密码”后面的竖线 3.如何嵌套输入框的布局 4.如何监听输入框的输入事件及删除按钮的动态显示隐藏 1.如何使用圆角输入框和按钮背景 安卓为开发者准备了shape这个xml标签，用于自定义一些形状。 那么我就来定义一个白色的输入框背景。代码如下： <!-- 形状 --> <shape xmlns:android="http://schemas.android.com/apk/res/android"
【Bootstrap】012-组件：按钮组、按钮式下拉菜单、输入框组
訾博（ZiBo）的博客
10-07 598
一、菜单组 1、概述 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为； 2、基本实例 用.btn 在.btn-group 中包装一系列按钮； 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.
struts2 标签库 帮助文档
11-30
Struts 2 标签库(文档手册) Tags-API-CLSW-JSP <%@ taglib prefix="s" uri="/struts-tags" %> 就能...tabbedPanel:AJAX标签,生成HTML中的Tab页。 tree标签：生成一个树形结构。 treenode标签：生成树形结构的节点。
Struts2+API+标签全解+网页说明
07-12
optgroup标签：生成一个下拉列表框的选择组，下拉列表框中可以包含多个选择组。 token标签：防用户多次提交表单。 textarea标签：文本域。 updownselct标签：支持选项内容的上下移动。 password表单：密码表单域...
Axure交互原型Web组件库 完整版v1.rp
09-07
常用切换标签页 简洁菜单切换 卡片式菜单切换 分页 Pagination 常用分页组件 扩展分页组件 简洁分页组件 进度条 Progress 常用进度条 步骤条 Steps 常用步骤条 迷你步骤条 图标步骤条 垂直...
【高端元件库】移动端高保真动态交互元件库V3.4.zip
04-14
支付宝小程序/列表式导航/下拉式导航/抽屉式导航/宫格式导航/轮播式导航）、走马灯、分段器、标签页、输入框、工具栏、标签栏、滑动开关、数字、步进器、进度条、时间轴、步骤条、评分组件、左右滑动操作、拖动排序...
CSS 选择器知识点总结
weixin_40348267的博客
05-05 948
但是记得不可滥用!选择器是 CSS 中的关键部分，允许你精确地定位和样式化特定的元素或元素组。这篇文章的内容是 CSS 的选择器，这是写页面样式的第一步，知道 CSS 有哪些选择器是每个前端工程师必会的内容之一。：没有特定性或源代码顺序的概念，但需要注意的是某些样式属性具有继承性，例如字体属性，它们可以从父元素继承到子元素。这些是 CSS 的常用选择器，将这些选择器组合起来使用，或者是嵌套使用可以改变选择器的权重。a：内联样式（在元素的 style 属性中定义的样式）的数量（权重值最高，值为1000）。
CSS：border作用
2302_79730293的博客
05-08 735
CSS：border作用
CSS：盒子模型
最新发布
2301_79263365的博客
05-09 812
如果所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子！
【CSS基础--CSS选择器的常见用法】
m0_63440113的博客
05-08 353
层叠样式表，由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。
准备带筛选方式的动态表单组件所需的数据，包括筛选条件数据列表、筛选方式列表、表字段信息列表。筛选条件数据列表除包含生成动态表单的筛选条件标签中英文名称、页面元素类型（输入框、下拉框、日期选择器、日期时间选择器）、字段的数据类型外，还需将筛选条件标签的英文名称与筛选方式组合为唯一的主键bindingKey ，即bindingKey = columnName[#conditionType#]，以满足动态表单中筛选条件输入框绑定的标签支持不同筛选方式。表单中输入框的值和v-model绑定的值是双向绑定关系，当筛选条件为介于或非介于时，页面展示为两个输入框对应一个筛选条件标签，通过特殊设定输入框、下拉框选择器、日期选择选择器、日期时间选择器v-model绑定的开始值、结束值，能够实现筛选条件对应的两个输入框的值不会互相影响
07-20
此外，你还需要将筛选条件标签的英文名称与筛选方式组合为唯一的主键bindingKey，即`bindingKey = columnName[#conditionType#]`，以满足动态表单中筛选条件输入框绑定的标签支持不同筛选方式。 2. 筛选方式列表：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值