- 浏览: 2485572 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
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(8)TaoBao Winner - UI BootStrap - Base CSS
12. BootStrap with Version 2.3.2
12.4 Base CSS - Typography
h1 ~ h6, they are just normal HTML elements.
<p>, if we want to make it outstanding, we can add CSS <p class="lead">
Some Emphasis
<small>This line of text is meant to be treated as fine print.</small>
<strong>rendered as bold text</strong>
<em>rendered as italicized text</em>
Alignment Classes
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="muted">Fuscedapibus, tellusaccursuscommodo, tortormaurisnibh.</p><p class="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p><p class="text-error">Donecullamcorpernulla non metusauctorfringilla.</p><p class="text-info">Aeneaneuleoquam. Pellentesqueornaresemlaciniaquamvenenatis.</p>
<p class="text-success">Duismollis, est non commodoluctus, nisieratporttitorligula.</p>
Abbreviations
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> SanFrancisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address> <strong>Full Name</strong><br> <ahref="mailto:#">first.last@example.com</a>
</address>
BlockQuote
<blockquote> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p></blockquote><blockquote class="pull-right"> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p> <small>Someone famous <citetitle="Source Title"]]>Source Title</cite></small>
</blockquote>
Lists
Just use <ul><li> or <ol><li>, they are just HTML elements.
inline-block will make it as one line.
<ul><li>Task 1</li><li>Task 2</li></ul>
<ol><li>Task 1</li><li>Task 2</li></ol>
<ul class="inline"><li>Task 1</li><li>Task 2</li>
</ul>
Description
<dl> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd>
</dl>
class="dl-horizontal" will make the description horizontal.
12.5 Base CSS - Code
Code for single line of Source Codes
<p>For example, <code><section></code> should be wrapped as inline.</p>
<p>For example, <code>System.out.println("test for fun")</code> should be wrapped as inline.</p>
I change my project to use intelliJ, I just want to try something now.
For multiple lines of codes, I am going to use <pre>
<pre>
try{
System.out.println("test for fun.");
}catch(Exception e){
e.printStack();
}
</pre>
12.6 Base CSS - Tables
Here is the normal Table Structure.
<table class="table">
<caption>Here is Table Caption</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hua</td>
<td>Luo</td>
</tr>
<tr>
<td>Carl</td>
<td>Luo</td>
</tr>
<tr>
<td>Sillycat</td>
<td>Luo</td>
</tr>
</tbody>
</table>
</body>
I only add class="table" for the normal situation, and thead, tbody, th, caption, there tags are seldom used by me.
Sometime, class would be .table-striped, not would be. But add table-striped.
<table class="table table-striped">
And bordered
<table class="table table-striped table-bordered">
<table class="table table-striped table-bordered table-hover table-condensed">
table-hover to make a hover when you mouse over the tr, table-condensed just make it tight.
Optional row classes
We can put success, error, warning, info in <tr> element.
12.7 Base CSS - Forms
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something...">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The important part or rather say the new things for me are the <fieldset>, <legend> <label> placeholder
I do not see any benefit in Search Form CSS.
<form class="form-search">
<input type="text" class="input-large search-query">
<button type="submit" class="btn">Search</button>
</form>
There are input-large, input-medium, input-small
Inline Form
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Horizontal Form
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Some elements, just use them as before.
Inputs, Texarea, checkbox, radio
<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
Inline checkboxes
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
some soon...
13. BackBone
come soon...
References:
http://twitter.github.io/bootstrap/base-css.html#typography
http://twitter.github.io/bootstrap/base-css.html#tables
http://twitter.github.io/bootstrap/base-css.html#forms
12. BootStrap with Version 2.3.2
12.4 Base CSS - Typography
h1 ~ h6, they are just normal HTML elements.
<p>, if we want to make it outstanding, we can add CSS <p class="lead">
Some Emphasis
<small>This line of text is meant to be treated as fine print.</small>
<strong>rendered as bold text</strong>
<em>rendered as italicized text</em>
Alignment Classes
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="muted">Fuscedapibus, tellusaccursuscommodo, tortormaurisnibh.</p><p class="text-warning">Etiamportasemmalesuadamagnamolliseuismod.</p><p class="text-error">Donecullamcorpernulla non metusauctorfringilla.</p><p class="text-info">Aeneaneuleoquam. Pellentesqueornaresemlaciniaquamvenenatis.</p>
<p class="text-success">Duismollis, est non commodoluctus, nisieratporttitorligula.</p>
Abbreviations
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> SanFrancisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address> <strong>Full Name</strong><br> <ahref="mailto:#">first.last@example.com</a>
</address>
BlockQuote
<blockquote> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p></blockquote><blockquote class="pull-right"> <p>Loremipsumdolor sit amet, consecteturadipiscingelit. Integer posuereerat a ante.</p> <small>Someone famous <citetitle="Source Title"]]>Source Title</cite></small>
</blockquote>
Lists
Just use <ul><li> or <ol><li>, they are just HTML elements.
inline-block will make it as one line.
<ul><li>Task 1</li><li>Task 2</li></ul>
<ol><li>Task 1</li><li>Task 2</li></ol>
<ul class="inline"><li>Task 1</li><li>Task 2</li>
</ul>
Description
<dl> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd> <dt>Description Title</dt> <dd>Description Description, here it is, mostly, from my understanding, IPONE5 is a good device.</dd>
</dl>
class="dl-horizontal" will make the description horizontal.
12.5 Base CSS - Code
Code for single line of Source Codes
<p>For example, <code><section></code> should be wrapped as inline.</p>
<p>For example, <code>System.out.println("test for fun")</code> should be wrapped as inline.</p>
I change my project to use intelliJ, I just want to try something now.
For multiple lines of codes, I am going to use <pre>
<pre>
try{
System.out.println("test for fun.");
}catch(Exception e){
e.printStack();
}
</pre>
12.6 Base CSS - Tables
Here is the normal Table Structure.
<table class="table">
<caption>Here is Table Caption</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hua</td>
<td>Luo</td>
</tr>
<tr>
<td>Carl</td>
<td>Luo</td>
</tr>
<tr>
<td>Sillycat</td>
<td>Luo</td>
</tr>
</tbody>
</table>
</body>
I only add class="table" for the normal situation, and thead, tbody, th, caption, there tags are seldom used by me.
Sometime, class would be .table-striped, not would be. But add table-striped.
<table class="table table-striped">
And bordered
<table class="table table-striped table-bordered">
<table class="table table-striped table-bordered table-hover table-condensed">
table-hover to make a hover when you mouse over the tr, table-condensed just make it tight.
Optional row classes
We can put success, error, warning, info in <tr> element.
12.7 Base CSS - Forms
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something...">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The important part or rather say the new things for me are the <fieldset>, <legend> <label> placeholder
I do not see any benefit in Search Form CSS.
<form class="form-search">
<input type="text" class="input-large search-query">
<button type="submit" class="btn">Search</button>
</form>
There are input-large, input-medium, input-small
Inline Form
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Horizontal Form
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
Some elements, just use them as before.
Inputs, Texarea, checkbox, radio
<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
Inline checkboxes
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
some soon...
13. BackBone
come soon...
References:
http://twitter.github.io/bootstrap/base-css.html#typography
http://twitter.github.io/bootstrap/base-css.html#tables
http://twitter.github.io/bootstrap/base-css.html#forms
发表评论
-
MongoDB 2019(3)Security and Auth
2019-11-16 06:48 202MongoDB 2019(3)Security and Aut ... -
Memory Leak in NodeJS
2018-12-20 06:26 689Memory Leak in NodeJS I have d ... -
Remote Desktop Client
2018-12-07 13:19 1148Remote Desktop Client There is ... -
MetaBase UI Console(2)Docker on MySQL
2018-11-29 06:58 895MetaBase UI Console(2)Docker on ... -
AWS Lambda and Serverless Timeout
2018-09-20 01:20 596AWS Lambda and Serverless Timeo ... -
2018 WebSocket(1)Introduction
2018-03-20 01:22 10712018 WebSocket(1)Introduction ... -
2018 TypeScript Update(3)Introduction Basic Grammar
2018-03-08 03:08 5652018 TypeScript Update(3)Introd ... -
2018 TypeScript Update(2)Introduction Basic Grammar - Classes and Functions
2018-03-06 05:32 5162018 TypeScript Update(2)Introd ... -
2018 TypeScript Update(1)Introduction Basic Grammar - Types and Interface
2018-03-03 01:15 5662018 TypeScript Update(1)Introd ... -
Charts and Console(6)Paging
2018-03-01 00:12 554Charts and Console(6)Paging Th ... -
Vue.JS(3)Google Login
2018-02-14 04:53 1238Vue.JS(3)Google Login I just p ... -
Vue.JS(2)Monitor Water Console - ChartJS and Axios
2018-02-14 03:17 688Vue.JS(2)Monitor Water Console ... -
Vue.JS(1)Introduction and Basic Demo
2018-02-08 06:47 569Vue.JS(1)Introduction and Basic ... -
Charts and Console(5)Validation Form
2017-10-03 05:12 766Charts and Console(5)Validation ... -
Charts and Console(4)Display and Enhancement
2017-09-20 05:39 599Charts and Console(4)Display an ... -
Charts and Console(3)Auth and Login
2017-09-13 03:45 625Charts and Console(3)Auth and L ... -
Charts and Console(2)Login and Proxy
2017-08-31 05:39 840Charts and Console(2)Login and ... -
Charts and Console(1)UI Console and RESTful Client
2017-08-29 11:02 735Charts and Console(1)UI Console ... -
Blog Project(2)Express Backend API - istanbul - mocha - bunyan
2017-06-09 00:05 446Blog Project(2)Express Backend ... -
ReactJS(5)Composition vs Inheritance
2017-06-06 05:55 1071ReactJS(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: ... :编写CSS代码来对React组件进行样式化 机会:JavaScript的随机对象生成器 Netlify :前端托管服务
克隆或分叉此存储库: 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 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何...
使用热重装STARTER的React 16+ Bootstrap Webpack 4 具有热重载功能的ReactJS + Bootstrap入门 ES6 + -ES2015 +中的完整客户端和服务器端 背后的概念:此入门程序是一种易于理解的方法,可以轻松地使用ReactJS(ES6...