欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

bootstrap学习笔记 有关css(一)

来源: 开发者 投稿于  被查看 38731 次 评论:269

bootstrap学习笔记 有关css(一)


<img src="data/attachment/album/201209/13/170428twapotd9nxwttc39.png"><br>&lt;!doctype html&gt;<br>&lt;meta charset="UTF-8"&gt;<br>&lt;head&gt;<br>&lt;title&gt;bootstrap表单&lt;/title&gt;<br>&lt;link href="css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet" /&gt;<br>&lt;link href="css/bootstrap.css"&nbsp; type="text/css" rel="stylesheet" /&gt;<br>&lt;link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" /&gt;<br>&lt;link href="css/bootstrap-responsive.css" type="text/css"&nbsp; rel="stylesheet" /&gt;<br>&lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;<br>&lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;div class="container" &gt;<br>&lt;div class="controls"&gt;<br>&lt;input class="span5" type="text" placeholder=".span5"&gt;<br>&lt;/div&gt;<br>&lt;div class="controls controls-row"&gt;<br>&lt;input class="span4" type="text" placeholder=".span4"&gt;<br>&lt;input class="span1" type="text" placeholder=".span1"&gt;<br>&lt;/div&gt;<br>&lt;div class="controls controls-row"&gt;<br>&lt;input class="span2" type="text" placeholder=".span2"&gt;<br>&lt;input class="span3" type="text" placeholder=".span3"&gt;<br>&lt;/div&gt;<br>&lt;span class="input-xlarge uneditable-input"&gt;some value here&lt;/span&gt;&lt;!--相当于disabled--&gt;<br>&lt;div class="form-actions"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;button type="submit" class="btn btn-primary"&gt;保存改变&lt;/button&gt;<br>&nbsp;&nbsp;&nbsp; &lt;button type="button" class="btn"&gt;取消&lt;/button&gt;<br>&lt;input type="text"&gt;&lt;span class="help-inline"&gt;help text&lt;/span&gt;<br>&lt;span class="help-block"&gt;A longer&lt;/span&gt;<br>&lt;/div&gt;<br><br>&lt;input class="input-xlarge" id="focusedInput" type="text" value="这是被关注的"&gt;<br>&lt;input class=" input-xlarge " id="disabledInput" type="text" placeholder="禁止区域" disabled&gt;<br><br>&lt;div class="control-group warning"&gt;<br>&lt;label class="control-label" for="inputWarning"&gt;inputWarnning&lt;/label&gt;<br>&lt;div class="controls"&gt;<br>&lt;input type="text" id="inputWarning"&gt;<br>&lt;span class="help-inline"&gt;warning&lt;/span&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div class="control-group error"&gt;<br>&lt;label class="control-label" for="inputError"&gt;inputWarnning&lt;/label&gt;<br>&lt;div class="controls"&gt;<br>&lt;input type="text" id="inputError"&gt;<br>&lt;span class="help-inline"&gt;warning&lt;/span&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;div class="control-group success"&gt;<br>&lt;label class="control-label" for="inputSuccess"&gt;inputWarnning&lt;/label&gt;<br>&lt;div class="controls"&gt;<br>&lt;input type="text" id="inputSuccess"&gt;<br>&lt;span class="help-inline"&gt;warning&lt;/span&gt;<br>&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;button class="btn"&gt;login&lt;/button&gt;<br>&lt;button class="btn btn-primary"&gt;login&lt;/button&gt;<br>&lt;button class="btn btn-success"&gt;success&lt;/button&gt;<br>&lt;button class="btn btn-warning"&gt;warning&lt;/button&gt;<br>&lt;button class="btn btn-info"&gt;info&lt;/button&gt;<br>&lt;button class="btn btn-danger"&gt;danger&lt;/button&gt;<br>&lt;a class="btn btn-danger"&gt;login&lt;/a&gt;<br>&lt;button class="btn"&gt;login&lt;/button&gt;<br>&lt;button class="btn btn-large btn-primary"&gt;login&lt;/button&gt;<br>&lt;button class="btn btn-success"&gt;success&lt;/button&gt;<br>&lt;button class="btn btn-warning"&gt;warning&lt;/button&gt;<br>&lt;button class="btn btn-info"&gt;info&lt;/button&gt;<br>&lt;button class="btn btn-danger"&gt;danger&lt;/button&gt;<br>&lt;button class="btn btn-large btn-block btn-info" &gt;block&lt;/button&gt;<br>&lt;a class="btn btn-small btn-danger disabled"&gt;login&lt;/a&gt;<br>&lt;button type="button" class="btn btn-primary" disabled&gt;reset&lt;/button&gt;<br><br><br><br><br>&lt;i class="icon-search icon-white"&gt;&lt;/i&gt;<br><br>&lt;div class="btn-group"&gt;<br>&lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt;user&lt;/a&gt;<br>&lt;a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;<br>&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;<br>&lt;ul class="dropdown-menu"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-bar"&gt;hello&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;hello&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;hello&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li class="divider"&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-i"&gt;make admine&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br>&lt;/ul&gt;<br>&lt;pre class="info span4"&gt;<br>我真的不知道中国的那两首海监船跑哪儿去了是不是迷路了,还是因为油价上涨,跑到半道没油了。<br><br>当年不就是一个毛头小子 匪和正规军说要一起对抗外敌,最后毛头小子就尽在后面发展军力了。终于打赢外敌的正规军 不出意外地被匪给暗害了。后来做了带头大哥,<br>然后一个劲儿在教科书和影片中宣传自己的丰功伟绩抗日艰难。蔫了,这次可真撞上小日本了,你说你敢打吗?现在好了人台湾国军都要登岛了。主力上去,匪又开始搞什么从旁协助了。简直要笑死人。这次要是不作出有效行动,自己真就打自己一个大嘴巴子了!&lt;/pre&gt;<br>&lt;/div&gt;<br>&lt;div class="btn-group"&gt;<br>&nbsp; &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;<br>&nbsp; &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;<br>&nbsp; &lt;ul class="dropdown-menu"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li class="divider"&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;<br>&nbsp; &lt;/ul&gt;<br>&lt;/div&gt;<br>&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;<br>&lt;ul class="nav nav-list"&gt;<br>&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt;home&lt;/a&gt;&lt;/li&gt;<br>&lt;li &gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt;hhhh&lt;/a&gt;&lt;/li&gt;<br>&lt;li &gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt;hhhh&lt;/a&gt;&lt;/li&gt;<br><br>&lt;li &gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt;hhhhh&lt;/a&gt;&lt;/li&gt;<br><br>&lt;li &gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt;hhhhhh&lt;/a&gt;&lt;/li&gt;<br><br>&lt;/ul&gt;<br><br>&lt;div class="control-group"&gt;<br>&lt;label class="control-label" for="inputIcon"&gt;emaile&lt;/label&gt;<br>&lt;div class="controls"&gt;<br>&lt;div class="input-prepend"&gt;<br>&lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;<br>&lt;input class="span2" id="inputIcon" type="text"&gt;<br>&lt;/div&gt;<br><br>&lt;/div&gt;<br><br>&lt;/div&gt;<br>&lt;/div&gt;<br><br><br><br><br><br><br><br><br>&lt;/body&gt;<br>&lt;/html&gt;<br>

用户评论