在慕课学习Bootstrap
---恢复内容开始---
可以用class=“h1”等给元素加h1样式
<h>------<small>----</small></h> <small>是副标题
class="lead" 强调文本,突出显示
<strong>---</strong> 粗体
<i>---</i> <em>---</em> 斜体
- text-muted:提示,使用浅灰色(#999) text-left 文本向左对齐 .table:基础表格
- .text-primary:主要,使用蓝色(#428bca) text-right 文本向右对齐 .table-striped:斑马线表格
- .text-success:成功,使用浅绿色(#3c763d) text-center 文本居中对齐 .table-bordered:带边框的表格
- .text-info:通知信息,使用浅蓝色(#31708f) text-justify 文本两端对齐 .table-hover:鼠标悬停高亮的表格
- .text-warning:警告,使用黄色(#8a6d3b) .table-condensed:紧凑型表格
- .text-danger:危险,使用褐色(#a94442) .table-responsive:响应式表格
class=“list-inline” 内联列表,简单说就是水平的没有符号的列表,为导航而生
自定义列表中加class=“dl-horizontal” 自定义水平列表
在网页上插入代码有三种<code>单行</code> <pre>多行</pre> <kbd>用户用键盘操作</kbd> 无论是哪一个 小于号用<,大于号用>
<pre class="pre-scrollable">多行代码是,又不想让其占用过多面积,此类可以出现滚动条,高度限定为340px
| 类名 | 描述 |
|---|---|
| .active | 表示当前活动的信息 |
| .success | 表示成功或者正确的行为 |
| .info | 表示中立的信息或行为 |
| .warning | 表示警告,需要特别注意 |
| .danger | 表示危险或者可能是错误的行为 |
水平表单class=“form-horizontal”
内联表单class=“form-inline”
<div class="form-group"><input type="--" class="form-control" placehoder="Enter email"></div>
下拉选择框(滚动条模式的话,在select中加multiple)
<div class="form-group">
<select class="form-control">
<option></option>
<option></option>
<option></option>
</select>
</div>
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
复选框checkbox和单选择按钮radio 水平排列加inline
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
---恢复内容结束---
可以用class=“h1”等给元素加h1样式
<h>------<small>----</small></h> <small>是副标题
class="lead" 强调文本,突出显示
可以用class=“h1”等给元素加h1样式
<h>------<small>----</small></h> <small>是副标题
class="lead" 强调文本,突出显示
在慕课学习Bootstrap的更多相关文章
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- 如何快速轻松学习bootstrap
我以前也是通过看一些视频教程来学的,比如慕课网上的,比如51cto上的那些零基础入门bootstrap什么的,还有一些培训班里流传出来的,感觉晕乎乎的,不知所云. 还是在后面不断使用的过程中慢慢体会到 ...
- bootstrap插件学习-bootstrap.typehead.js
先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...
- bootstrap插件学习-bootstrap.carousel.js
先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...
- bootstrap插件学习-bootstrap.collapse.js
先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...
- bootstrap插件学习-bootstrap.alert.js
我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...
- bootstrap插件学习-bootstrap.button.js
先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} // ...
- bootstrap插件学习-bootstrap.popover.js
先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...
随机推荐
- HDU 5515 Game of Flying Circus 二分
Game of Flying Circus Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem ...
- java web servlet
一.什么是Servlet Servlet是一种小型的Java程序,它扩展了Web服务器的功能.作为一种服务器端的应用,他是运行在Servlet容器当中,例如Tomcat就是一种流行的Servlet容器 ...
- jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习
程序猿都非常赖.你懂的! 近期在做html5页面的开发,主要做智能终端设备的开发.对于内容比較少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这种要求,事实上一点也只是分.但对于新手 ...
- ural 1998 The old Padawan
先预处理每一个点往前退几步 就一个trick..要处理这一秒已经超出了要拿完所花的时间 #include <iostream> #include <cstring> #incl ...
- [AngularJS] New in Angular 1.3 - bindToController
If you want to use controllers, instead of a link function, you can use bindToController. <!DOCTY ...
- qt 获取系统磁盘空间大小
quint64 getDiskFreeSpace(QString driver) { LPCWSTR lpcwstrDriver=(LPCWSTR)driver.utf16(); ULARGE_INT ...
- linux乱码问题
命令输入: export LANG=zh_CN.GBK grep 匹配时高亮 先执行:export GREP_OPTIONS='--color=auto'; 后执行:grep 匹配内容 文件; 描述: ...
- 嵌入式Linux开发系列之一: 走进嵌入式Linux的世界
转载:http://www.ibm.com/developerworks/cn/linux/l-embed/part1/index.html 随着信息化技术的发展和数字化产品的普及,以计算机技术. ...
- eclipse按Crl+鼠标左键,找不到源文件的解决办法。
这种情况一般发生在tomcat的之中,原因是缺少类的源文件.在jdk中很少见,jdk中自带类的源文件,配置jdk的时候就已经将其加载进来了.而tomcat之中没有带类的源文件,需要自己去网上单独下载. ...
- Android 高级UI设计笔记09:Android如何实现无限滚动列表
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...