sillycat
- 浏览: 2488866 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
nation：
你好，在部署Mesos+Spark的运行环境时，出现一个现象， ...
Spark(4)Deal with Mesos -
sillycat：
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat：
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat：
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat：
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
SuperPlan(9)TaoBao Winner - UI Forms with Validation States
12. BootStrap with Version 2.3.2
12.7 Base CSS - Forms
Selects
Directly use <select><option>…</option></select> Or <select multiple="multiple"> to display all the options. But I do not think it is useful.
Prepended and appended inputs
This should be useful
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
Button Dropdowns
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
</ul>
</div>
</div>
Do not forget to put <!DOCTYPE html> at the beginning. Or otherwise, the input row will be to short.
Segmented DropDown Groups
<ul class="dropdown-menu">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li class="divider">
<li>Quit</li>
</ul>
Search Form
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
12.8 Base CSS - Forms - Control sizing
We can use .input-large or .span*. And there is a kind of sizing, block level. It can be applied to any <input> and <textarea>
<input class="input-block-level" type="text" placeholder=".input-block-level">
Relative Sizing
<input class="input-mini" type="text" placeholder=".input-mini"><br>
<input class="input-small" type="text" placeholder=".input-small"><br>
<input class="input-medium" type="text" placeholder=".input-medium"><br>
<input class="input-large" type="text" placeholder=".input-large"><br>
<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"><br>
Grid Sizing
span* can be applied to <input> <select>, it is really good.
<input class="span1" type="text" placeholder=".span1"><br>
<input class="span2" type="text" placeholder=".span2"><br>
<input class="span3" type="text" placeholder=".span3"><br>
<select class="span1"><br>
<option>1</option>
</select>
<select class="span2"><br>
<option>1</option>
</select>
<select class="span3"><br>
<option>1</option>
</select>
Multiple Inputs in One Line
controls-row will be useful to control the proper spacing, collapse white-space, sets the proper margins, clears the float.
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
Uneditable Inputs
<div class="controls">
<span class="input-xxlarge uneditable-input">Some value here</span>
</div>
Form Actions
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>
btn-primary means that this is the button to submit from my understanding.
Help Text
<div class="controls">
<input type="text"><span class="help-inline">Inline help text</span>
</div>
<div class="controls">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
Form Control States
<div class="controls">
<input class="span3" type="email" required>
</div>
<div class="controls">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
There is hint when you click on the input box.
Validation States
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is already taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
I want to be a good UI person. Haha.
I am listening to a sone while I am programming. "有时候，我选择留恋不放手。"
13. BackBone
come soon...
References:
http://twitter.github.io/bootstrap/base-css.html?#forms
Previous
http://sillycat.iteye.com/blog/1873754
http://sillycat.iteye.com/blog/1873144
12. BootStrap with Version 2.3.2
12.7 Base CSS - Forms
Selects
Directly use <select><option>…</option></select> Or <select multiple="multiple"> to display all the options. But I do not think it is useful.
Prepended and appended inputs
This should be useful
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
<div class="input-append">
<input class="span2" id="appendedInputButtons" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div>
Button Dropdowns
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
</ul>
</div>
</div>
Do not forget to put <!DOCTYPE html> at the beginning. Or otherwise, the input row will be to short.
Segmented DropDown Groups
<ul class="dropdown-menu">
<li>Add</li>
<li>Update</li>
<li>Delete</li>
<li class="divider">
<li>Quit</li>
</ul>
Search Form
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
12.8 Base CSS - Forms - Control sizing
We can use .input-large or .span*. And there is a kind of sizing, block level. It can be applied to any <input> and <textarea>
<input class="input-block-level" type="text" placeholder=".input-block-level">
Relative Sizing
<input class="input-mini" type="text" placeholder=".input-mini"><br>
<input class="input-small" type="text" placeholder=".input-small"><br>
<input class="input-medium" type="text" placeholder=".input-medium"><br>
<input class="input-large" type="text" placeholder=".input-large"><br>
<input class="input-xlarge" type="text" placeholder=".input-xlarge"><br>
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"><br>
Grid Sizing
span* can be applied to <input> <select>, it is really good.
<input class="span1" type="text" placeholder=".span1"><br>
<input class="span2" type="text" placeholder=".span2"><br>
<input class="span3" type="text" placeholder=".span3"><br>
<select class="span1"><br>
<option>1</option>
</select>
<select class="span2"><br>
<option>1</option>
</select>
<select class="span3"><br>
<option>1</option>
</select>
Multiple Inputs in One Line
controls-row will be useful to control the proper spacing, collapse white-space, sets the proper margins, clears the float.
<div class="controls">
<input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<input class="span1" type="text" placeholder=".span1">
</div>
Uneditable Inputs
<div class="controls">
<span class="input-xxlarge uneditable-input">Some value here</span>
</div>
Form Actions
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
</div>
btn-primary means that this is the button to submit from my understanding.
Help Text
<div class="controls">
<input type="text"><span class="help-inline">Inline help text</span>
</div>
<div class="controls">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
Form Control States
<div class="controls">
<input class="span3" type="email" required>
</div>
<div class="controls">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
There is hint when you click on the input box.
Validation States
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is already taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
I want to be a good UI person. Haha.
I am listening to a sone while I am programming. "有时候，我选择留恋不放手。"
13. BackBone
come soon...
References:
http://twitter.github.io/bootstrap/base-css.html?#forms
Previous
http://sillycat.iteye.com/blog/1873754
http://sillycat.iteye.com/blog/1873144
分享到：
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 204MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 692Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1152Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 901MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 599AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10752018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5692018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5192018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5702018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 557Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1243Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 690Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 573Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 771Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 604Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 628Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 845Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 737Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 447Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1076ReactJS(5)Composition vs Inheri ...
相关推荐
作为一种广泛存在于各个领域的竞争现象，关于赢者通吃（winner-take-all）的大部分研究太复杂以至于难以很好地理解该现象。为了用简单的方式解释winner-take-all现象，提出了一个改进的winner-take-all模型，由离散...
SOM网络即自组织特征映射网络，采用竞争学习规则——Winner-Take-All 。网络的输出神经元之间相互竞争以求被激活，结果在每一时刻只有一个输出神经元被激活。这个被激活的神经元称为竞争获胜神经元，而其它神经元的...
WINNER-II场景下的信道仿真模型，可用于分析各个场景下的信道参数
SCM WINNER II Channel Models, D1.1.2 V1.2, IST-4-027756 WINNER II Deliverable
WINNER II信道模型的建模与仿真 绍WINNER II信道模型所支持的场景，信道建模方法及信道参数和信道系数产生.
此 ALF Winner 指标通过建立在 -50/ 50 级别的翻转区域识别趋势变化。
维纳滤波器的AR参数仿真，用于分析各参数对滤波器性能影响
winner2信道模型仿真了3D信道模型，里面涉及好多应用场景。可以与现实生活中的场景相匹配
#资源达人分享计划#
ZS-Young-Data-scientist-2018-Winner-Solution-rank-3：ZS年轻数据科学家挑战赛2018
默认情况下，winner-mode 包含在 emacs 中，因为版本 20 但它没有启用。 这是一个制作支持微功能的包的实验。 我有一段时间的想法，我终于要测试了。 安装 这个包裹是果酱。 从果酱安装它 package-install winner-...
冠军得主，鸡肉晚餐！ :rooster: 输入列表并旋转方向盘，即可每次获得随机赢家。 :crystal_ball: 目录 特征 输入名称或对象列表。 编辑并删除您的列表。 始终使用localStorage访问您最近创建的列表。...
win-9系列微能变频器使用说明书，介绍了变频器的键盘操作说明、端子接线说明、参数调整、故障解决等，很详细。
克隆或分叉此存储库： git clone https://github.com/jamigibbs/and-the-winner-is 安装依赖项： npm install 下载并安装桌面在Neo4j桌面上，使用用户neo4j和密码1234创建一个新的图形数据库。 注意：在生产
脆皮章鱼获胜者客户 HTML 5 Phaser客户端，用于crispy-octo-winner
组合拍卖中的获胜者确定问题项目电子商务
世界高尔夫协会工作流程
优胜者选择引擎 示例 React.js 项目 -> 按照 用法 要跟随本文，请克隆此存储库（请参阅下文以了解运行情况）并从master分支工作。 如果要查看完成的版本，请查看finished分支： git checkout finished ...
#INNOWASTEInnoWaste赢得了Technica 2021的一等奖，价值25000卢比我们的应用视频链接- 在这里签出网站- 轨迹：增强创新能力主要思想InnoWaste项目专注于家庭和公共废物的管理。 这个想法将激励人们节省固体废物，并...
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...