根据http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程,记录下学习的过程。
关键是熟悉或了解一些html标签的样式类,以便需要时,快速找到解决方案。
文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式
学习bootstrap的想法:
[color=red]1.非前端程序员而言,比较常用有bootstrap网格系统(用于排版),bootstra表格(用于列表展示内容),bootstrap表单。[/color]
bootstrap的东西太多,不可能每个都需要知道或了解,需要有所取舍,明白自己需要什么不需要什么。不要为了学习而学习,也不要凭兴趣去学习,要看你项目或工作中需要什么
[color=red]2.bootstrap往简单的说,就是样式表,只不过twitter写好了很多样式,直接拿来用就行[/color]
而bootstrap插件就是已经写好的js脚本,绑定了一些特定样式的组件或标签。只要组件样式符合要求,加载了插件,就能触发相应事件。[color=red]其中大部分绑定的标签或属性为data-api[/color]
[color=red]3.样式类class的命名一般符合一定规则,[/color]
如 .col-* 应用于网格系统的列(column)
.row 字面意思就是定义一个行元素
.text-success 就是应用于文本的样式
.list-inline 就是应用于html标签<ul>的样式类
.table .table-hover 适用于html标签<table>
.form-inline .form-group .form-control 主要控制表单的,但不一定一定作用于form元素
.input-lg .input-sm 控制input大小
bootstrap有些样式影响了排版,有些影响了显示
[color=red]4.比较大的收获[/color]
了解了一些比较专业的前端名词,如:
面包屑导航/标签式导航/胶囊式导航
徽章
Responsive Design (响应式设计)
well墙
分裂式按钮
谈到模态框时,把[color=red]按钮或链接[/color]当做模态框的[color=red]触发器[/color]
[color=red]5.学习bootstrap的主要原因[/color]
一是在于它的知名度,让我想不禁想去了解它,再一个是或许有一天当我需要做一些页面的东西(ps:赶鸭子上架),在没有前端的情况下,bootstrap可以作为一个选择,而我不想等到用时,再去学习它,那样也许有点晚了
[size=x-large]Bootstrap CSS[/size]
[size=medium]1.Bootstrap 网格系统[/size]-div.container div.row div.col
[img]http://dl2.iteye.com/upload/attachment/0124/1378/544f719b-d41a-31fd-bb9f-12442862044a.jpg[/img]
grid system
主要用于排版,类似于html的table,tr,td等元素,这里用css实现内容结构排版
[color=red]网格系统主要类有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*[/color]
基本结构:
1.1 .col-md-offset-3 列左外边距偏移3单元格
[img]http://dl2.iteye.com/upload/attachment/0124/1277/da8c672b-53bf-38db-8ceb-5e5514cfea52.png[/img]
注:没有.col-xs-offset-*元素 但可通过空单元格实现偏移
1.2 .col-md-push-8 列位置向右移动8列
.col-md-pull-4 列位置向左移动4列
[img]http://dl2.iteye.com/upload/attachment/0124/1279/5ef43f89-4456-3a47-89f5-b352ac59ca81.png[/img]
[size=medium]2.Bootstrap 排版[/size]-h1-h6 p.text-left p.text-success ul.list-inline
[color=red]Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。只要引入bootstrap样式,默认应用bootstrap的样式[/color]
2.1 强调
html的强调标签有
<small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)
[color=red]bootstrap提供的强调样式有(应用于元素<p>):
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1283/89f448a6-c6f5-3a6b-a4f0-0b8e3a45d0b4.png[/img]
2.2 缩写
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)
如:
2.3 列表
[color=red]列表主要样式类有:
.list-unstyled 应用于<ul> --清除样式
.list-inline 应用于<ul> --行内
.dl-horizontal 应用于<dl> --将属于与描述放在同一行[/color]
[size=medium]3.Bootstrap 代码[/size]-code pre
[color=red]bootstrap定义了html元素<code> <pre>的默认样式[/color]
<code>以内联形式显示代码 --bootstrap定义了颜色
<pre>以多行形式显示代码 --bootstrap定义了背景颜色
<pre class="pre-scrollable"> --多行代码带有滚动条
开始和结束标签使用了 unicode 变体: < 和 >
[size=medium]4.Bootstrap 表格[/size]-table.table-striped div.table-responsive tr.success td.warning
[img]http://dl2.iteye.com/upload/attachment/0124/1380/c99a06cd-eaf1-389e-8e4b-6e781447c8fb.jpg[/img]
[color=red]bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素[/color]
4.1
[color=red]适用于html元素table的样式有:
.table,.table-striped,.table-bordered,.table-hover,.table-condensed[/color]
由这些元素名,就可看出其适用的html元素table
[color=red]适用于html元素<tr>, <th> 和 <td> 类
.active,.success,.info,.warning,.danger[/color]
4.2 响应式表格
对于小屏幕,可以水平滚动以显示内容
[size=medium]5.Bootstrap 表单[/size]-form.form-horizontal div.form-group input.form-control div.has-warning
[img]http://dl2.iteye.com/upload/attachment/0124/1382/54edbf4a-4b47-3bc2-9a6d-71898c2940d7.jpg[/img]
[color=red]bootstrap影响form表单的方式主要是html标签如<form> <input> <label>添加样式。还有一个是将form内的html标签和控件放在div里面,便于控制[/color]
[color=red]基本的样式类有.form-inline .form-horizontal .form-group .form-control .control-label [/color]
基本结构:--每个标签或控件占据一行
form role="role"
.form-inline .form-group .form-control
水平表单样式:
标签<label>水平,控件放在<div class="col-sm-*"> 里
复选框:
<div class="checkbox"><label><input/></label></div> 或者
<div><label class="checkbox-inline"></lable></div>
对于某些需要特定的输入文本,样式可以特殊处理(.has-warning):
如:
[img]http://dl2.iteye.com/upload/attachment/0124/1306/4f8cc238-ec07-3cd7-a8d0-59e974b00bdd.png[/img]
[color=red]控件大小样式类:
.input-lg .input-sm[/color]
[size=medium]6.Bootstrap 按钮[/size]-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按钮也是前端比较常用的一个组件
按钮的特性主要要颜色、大小、状态等,bootstrap还设置了一个标签
[color=red]<a href="#" class="btn btn-default btn-lg" role="button">链接</a>[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1376/e3a1ef19-c9ee-3995-b6c5-cf8714380d84.jpg[/img]
[size=medium]7.Bootstrap 图片[/size]-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap对图片的支持为以上一个类
[size=medium]8.Bootstrap 辅助类[/size]-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close
辅助样式类 如文本样式,背景样式,或文本居中组件显示隐藏等
[size=medium]9.Bootstrap 响应式实用工具[/size]-span.visible-xs-* span.hidden-sm
[color=red]可根据不同设备显示或隐藏某些元素[/color]
[size=x-large]Bootstrap 布局组件[/size]
[size=medium]1.Bootstrap 字体图标(Glyphicons)[/size]-span.glyphicon span.glyphicon-user
[img]http://dl2.iteye.com/upload/attachment/0124/1386/9ebee82e-aa91-3ccd-9643-3e74f5481e0e.jpg[/img]
[color=red]字体图标主要应用到按钮的背景[/color]
可根据需要制作特定的图标,地址:
[url]http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm[/url]
如:
[size=medium]2.Bootstrap 下拉菜单(Dropdowns)[/size]-div.dropdown ul.dropdown-menu
下拉菜单用的也比较多,如果想要有个看起来不错的下拉菜单,bootstrap是个不错的选择
[color=red]ul.dropdown-menu可单独使用不必必须放在div.dropdown下面,使用者可灵活使用[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1369/225f2885-d764-3b44-ba71-f3d1b90041f5.jpg[/img]
[size=medium]3.Bootstrap 按钮组[/size]-div.btn-group
[img]http://dl2.iteye.com/upload/attachment/0124/1388/648ddb97-c826-3485-8ea8-91464f17d976.jpg[/img]
[size=medium]4.Bootstrap 按钮下拉菜单[/size]-div.btn-group span.cacert
[size=medium]5.Bootstrap 输入框组[/size]-div.input-group
[img]http://dl2.iteye.com/upload/attachment/0124/1390/a650513d-bdcf-3cb4-b828-6f5b0669e8ae.jpg[/img]
[size=medium]6.Bootstrap 导航元素[/size]-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked
[img]http://dl2.iteye.com/upload/attachment/0124/1392/fb871228-4442-3c66-aebe-6d9d5cdfbd5b.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/1394/b53dc0f9-4afa-35ec-abd9-572a03f3ca8e.jpg[/img]
[size=medium]7.Bootstrap 导航栏[/size]-nav.navbar nav.navbar-default nav.navbar-fixed-top
[img]http://dl2.iteye.com/upload/attachment/0124/1396/9f0a0f05-f130-3408-b78d-669faa2db884.jpg[/img]
[size=medium]8.Bootstrap 面包屑导航(Breadcrumbs)[/size]-ol.breadcrumb
[color=red]面包屑导航[/color]-表示当前页面所在位置,每个部分可继续导航
以前见过这个导航方式,不过不清楚具体叫什么
[img]http://dl2.iteye.com/upload/attachment/0124/1398/595aa143-36fc-3a4d-98a1-315156815aac.jpg[/img]
[size=medium]9.Bootstrap 分页[/size]-ul.pagination ul.pager
[color=red]翻页也不一定必须放在ul.pager下面,也可以放在ul.pagination一起使用。这些class都是可以灵活使用的[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1400/45eaa454-a786-338d-940f-ec0469c18214.jpg[/img]
[size=medium]10.Bootstrap 标签[/size]-label.label label-default
[img]http://dl2.iteye.com/upload/attachment/0124/1402/f0d419cc-60d9-311d-bb07-b134666d6789.jpg[/img]
[size=medium]11.Bootstrap 徽章(Badges)[/size]-span.badge
[color=red]徽章[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1404/6e8a8c9a-ff80-30fe-a4ad-8c3b132f8f1f.jpg[/img]
[size=medium]12.Bootstrap 超大屏幕(Jumbotron)[/size]-div.jumbotron
[img]http://dl2.iteye.com/upload/attachment/0124/1406/94511018-78ba-3cba-9b23-46704bbdf77f.jpg[/img]
[size=medium]13.Bootstrap 页面标题(Page Header)[/size]-div.page-header
[size=medium]14.Bootstrap 缩略图[/size]-a.thumbnail
[color=red]不是很理解其作用[/color]
[size=medium]15.Bootstrap 警告(Alerts)[/size]-div.alert alert-success
[img]http://dl2.iteye.com/upload/attachment/0124/1408/ea465a7d-2d4d-3067-ade2-358984834ea7.jpg[/img]
[size=medium][color=red]网站上,如果需要对一些信息进行标注。一般对文字或背景设置特殊样式,bootstrap已经帮我们写好了这些特殊样式,直接拿来用就可以了[/color][/size]
[size=medium]16.Bootstrap 进度条[/size]-div.progress div.progress-bar
[img]http://dl2.iteye.com/upload/attachment/0124/1410/4c74343e-a1d2-36f4-83ac-fc27fdb089e4.jpg[/img]
[color=red][size=medium]如果想让自己的网站看起来很炫,设计一个界面美观的进度条,是个不错的特性。bootstrap已经写好了样式,拿来用就行。[/size][/color]
[size=medium]17.Bootstrap 多媒体对象(Media Object)[/size]-div.media
[color=red][size=medium]如果开发一些博客类或论文类的网站,在文字中插入一些图片,可能更具有观赏性[/size][/color]
[size=medium]18.Bootstrap 列表组[/size]-ul.list-group li.list-group-item a.list-group-item
[img]http://dl2.iteye.com/upload/attachment/0124/1412/52af6d63-4a1e-3da9-819a-cad3158b3ceb.jpg[/img]
[color=red][size=medium]list-group-item不一定非要放在ul.list-group下面使用,可独立使用如,
a.list-group-item可以有相同的样式效果。只不过放在div.list-group或ul.list-group下面更容易控制位置[/size][/color]
[size=medium]19.Bootstrap 面板(Panels)[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/1428/8e80731c-d34d-3ea7-bda9-f25419d66957.jpg[/img]
[color=red]如果网页的开发中,有需要用到面板,bootstrap已经帮你写好了样式。但是对于我来说,好像用到的也比较少,所以对一些没见过的特性也感到陌生。可能所处的行业有关系,或者一直做后台,没办法接触这些很炫的特性[/color]
[size=medium]20.Bootstrap Well[/size]-div.well
[img]http://dl2.iteye.com/upload/attachment/0124/1430/a912ce37-d1e5-3ec4-96e1-595f3a6aca03.jpg[/img]
[size=medium][color=red]Well 是一种会引起内容凹陷显示或插图效果的容器 <div>[/color][/size]
[size=large]Bootstrap 插件[/size]-上面的组件或样式是静态的,插件更多的是交互
[size=medium]1.Bootstrap 插件概览[/size]-集成了12中jquery插件
[size=medium]2.Bootstrap 过渡效果(Transition)插件[/size]-Transition.js
[size=medium]3.Bootstrap 模态框(Modal)插件[/size]-modal.js
data-api:data-toggle="model" data-target="#id" id是模态框div的id
[img]http://dl2.iteye.com/upload/attachment/0124/1555/3c57b408-812c-33e1-989f-3ffa8cd7c4c2.jpg[/img]
[size=medium]4.Bootstrap 下拉菜单(Dropdown)插件[/size]-dropdown.js
[size=medium]5.Bootstrap 滚动监听(Scrollspy)插件[/size]-scrollspy.js
[color=red]根据查看内容的位置,动态标注所在菜单或标签[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1559/472fa52b-fa8e-3b73-9075-1d318ac50786.png[/img]
[size=medium]6.Bootstrap 标签页(Tab)插件[/size]-tab.js
[color=red]动态显示标签下的内容div[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1561/2aad93cb-9b8d-395b-b86d-a1da03e40fd0.png[/img]
[size=medium]7.Bootstrap 提示工具(Tooltip)插件[/size]-tooltip.js
[color=red]鼠标移动,动态显示提示信息[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1563/8d041f21-aab6-32ea-829d-b0280b9876b6.jpg[/img]
[size=medium]8.Bootstrap 弹出框(Popover)插件[/size]-popover.js
[color=red]鼠标点击,弹出窗口信息[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1567/1a893fe8-68d2-3b93-901f-a010169df9aa.png[/img]
[size=medium]9.Bootstrap 警告框(Alert)插件[/size]-
[color=red]这种提示或警告方式似乎更别致一点[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1569/d2680b5e-6db3-36b4-9eef-3e4989bc0d28.png[/img]
[size=medium]10.Bootstrap 按钮(Button)插件[/size]-button.js
[color=red]通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1571/944987cf-52b1-3055-9268-595692e59b77.png[/img]
[size=medium]11.Bootstrap 折叠(Collapse)插件[/size]-collapse.js
[size=medium][color=red]可以动态的让某个页面区域div显示或影藏[/color][/size]
[img]http://dl2.iteye.com/upload/attachment/0124/1573/25e9b919-5bf8-3241-8469-fdbce34387e5.png[/img]
[size=medium]12.Bootstrap 轮播(Carousel)插件[/size]-carousel.js
[color=red][size=medium]滑动显示内容,一个漂亮的网站必不可少的特性[/size][/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1575/9b65a1b8-7a76-39fe-b977-dd1463c4ad95.png[/img]
[size=medium]13.Bootstrap 附加导航(Affix)插件[/size]-affix.js
[color=red][size=medium]将某个导航栏固定在页面的某个位置,不随页面移动[/size][/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1577/e182f054-b7b3-39a8-ae4f-82d4b8439b0a.png[/img]
[size=large]Bootstrap 其他[/size]
[size=medium]1.Bootstrap UI 编辑器[/size]-像dreamweaver一样设计页面
见:http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
[size=medium]2.Bootstrap HTML编码规范[/size]
[color=red]页面添加如下元素或特性:[/color]
<!DOCTYPE html>
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 兼容模式
<meta charset="UTF-8">
在线参考手册
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor
在线制定图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
关键是熟悉或了解一些html标签的样式类,以便需要时,快速找到解决方案。
文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式
学习bootstrap的想法:
[color=red]1.非前端程序员而言,比较常用有bootstrap网格系统(用于排版),bootstra表格(用于列表展示内容),bootstrap表单。[/color]
bootstrap的东西太多,不可能每个都需要知道或了解,需要有所取舍,明白自己需要什么不需要什么。不要为了学习而学习,也不要凭兴趣去学习,要看你项目或工作中需要什么
[color=red]2.bootstrap往简单的说,就是样式表,只不过twitter写好了很多样式,直接拿来用就行[/color]
而bootstrap插件就是已经写好的js脚本,绑定了一些特定样式的组件或标签。只要组件样式符合要求,加载了插件,就能触发相应事件。[color=red]其中大部分绑定的标签或属性为data-api[/color]
[color=red]3.样式类class的命名一般符合一定规则,[/color]
如 .col-* 应用于网格系统的列(column)
.row 字面意思就是定义一个行元素
.text-success 就是应用于文本的样式
.list-inline 就是应用于html标签<ul>的样式类
.table .table-hover 适用于html标签<table>
.form-inline .form-group .form-control 主要控制表单的,但不一定一定作用于form元素
.input-lg .input-sm 控制input大小
bootstrap有些样式影响了排版,有些影响了显示
[color=red]4.比较大的收获[/color]
了解了一些比较专业的前端名词,如:
面包屑导航/标签式导航/胶囊式导航
徽章
Responsive Design (响应式设计)
well墙
分裂式按钮
谈到模态框时,把[color=red]按钮或链接[/color]当做模态框的[color=red]触发器[/color]
[color=red]5.学习bootstrap的主要原因[/color]
一是在于它的知名度,让我想不禁想去了解它,再一个是或许有一天当我需要做一些页面的东西(ps:赶鸭子上架),在没有前端的情况下,bootstrap可以作为一个选择,而我不想等到用时,再去学习它,那样也许有点晚了
[size=x-large]Bootstrap CSS[/size]
[size=medium]1.Bootstrap 网格系统[/size]-div.container div.row div.col
[img]http://dl2.iteye.com/upload/attachment/0124/1378/544f719b-d41a-31fd-bb9f-12442862044a.jpg[/img]
grid system
主要用于排版,类似于html的table,tr,td等元素,这里用css实现内容结构排版
[color=red]网格系统主要类有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*[/color]
基本结构:
<div class="container">
<div class="row">
<div class="col-*-*">
</div>
</div>
</div>
1.1 .col-md-offset-3 列左外边距偏移3单元格
[img]http://dl2.iteye.com/upload/attachment/0124/1277/da8c672b-53bf-38db-8ceb-5e5514cfea52.png[/img]
注:没有.col-xs-offset-*元素 但可通过空单元格实现偏移
1.2 .col-md-push-8 列位置向右移动8列
.col-md-pull-4 列位置向左移动4列
[img]http://dl2.iteye.com/upload/attachment/0124/1279/5ef43f89-4456-3a47-89f5-b352ac59ca81.png[/img]
[size=medium]2.Bootstrap 排版[/size]-h1-h6 p.text-left p.text-success ul.list-inline
[color=red]Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。只要引入bootstrap样式,默认应用bootstrap的样式[/color]
2.1 强调
html的强调标签有
<small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)
[color=red]bootstrap提供的强调样式有(应用于元素<p>):
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1283/89f448a6-c6f5-3a6b-a4f0-0b8e3a45d0b4.png[/img]
2.2 缩写
Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)
如:
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
2.3 列表
[color=red]列表主要样式类有:
.list-unstyled 应用于<ul> --清除样式
.list-inline 应用于<ul> --行内
.dl-horizontal 应用于<dl> --将属于与描述放在同一行[/color]
[size=medium]3.Bootstrap 代码[/size]-code pre
[color=red]bootstrap定义了html元素<code> <pre>的默认样式[/color]
<code>以内联形式显示代码 --bootstrap定义了颜色
<pre>以多行形式显示代码 --bootstrap定义了背景颜色
<pre class="pre-scrollable"> --多行代码带有滚动条
开始和结束标签使用了 unicode 变体: < 和 >
[size=medium]4.Bootstrap 表格[/size]-table.table-striped div.table-responsive tr.success td.warning
[img]http://dl2.iteye.com/upload/attachment/0124/1380/c99a06cd-eaf1-389e-8e4b-6e781447c8fb.jpg[/img]
[color=red]bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素[/color]
4.1
[color=red]适用于html元素table的样式有:
.table,.table-striped,.table-bordered,.table-hover,.table-condensed[/color]
由这些元素名,就可看出其适用的html元素table
[color=red]适用于html元素<tr>, <th> 和 <td> 类
.active,.success,.info,.warning,.danger[/color]
4.2 响应式表格
对于小屏幕,可以水平滚动以显示内容
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody></tbody>
</table>
</div>
[size=medium]5.Bootstrap 表单[/size]-form.form-horizontal div.form-group input.form-control div.has-warning
[img]http://dl2.iteye.com/upload/attachment/0124/1382/54edbf4a-4b47-3bc2-9a6d-71898c2940d7.jpg[/img]
[color=red]bootstrap影响form表单的方式主要是html标签如<form> <input> <label>添加样式。还有一个是将form内的html标签和控件放在div里面,便于控制[/color]
[color=red]基本的样式类有.form-inline .form-horizontal .form-group .form-control .control-label [/color]
基本结构:--每个标签或控件占据一行
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
form role="role"
.form-inline .form-group .form-control
水平表单样式:
标签<label>水平,控件放在<div class="col-sm-*"> 里
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
</form>
复选框:
<div class="checkbox"><label><input/></label></div> 或者
<div><label class="checkbox-inline"></lable></div>
对于某些需要特定的输入文本,样式可以特殊处理(.has-warning):
如:
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div>
[img]http://dl2.iteye.com/upload/attachment/0124/1306/4f8cc238-ec07-3cd7-a8d0-59e974b00bdd.png[/img]
[color=red]控件大小样式类:
.input-lg .input-sm[/color]
[size=medium]6.Bootstrap 按钮[/size]-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按钮也是前端比较常用的一个组件
按钮的特性主要要颜色、大小、状态等,bootstrap还设置了一个标签
<button class="btn btn-default" type="submit">按钮</button>
[color=red]<a href="#" class="btn btn-default btn-lg" role="button">链接</a>[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1376/e3a1ef19-c9ee-3995-b6c5-cf8714380d84.jpg[/img]
[size=medium]7.Bootstrap 图片[/size]-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap对图片的支持为以上一个类
[size=medium]8.Bootstrap 辅助类[/size]-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close
辅助样式类 如文本样式,背景样式,或文本居中组件显示隐藏等
[size=medium]9.Bootstrap 响应式实用工具[/size]-span.visible-xs-* span.hidden-sm
[color=red]可根据不同设备显示或隐藏某些元素[/color]
[size=x-large]Bootstrap 布局组件[/size]
[size=medium]1.Bootstrap 字体图标(Glyphicons)[/size]-span.glyphicon span.glyphicon-user
[img]http://dl2.iteye.com/upload/attachment/0124/1386/9ebee82e-aa91-3ccd-9643-3e74f5481e0e.jpg[/img]
[color=red]字体图标主要应用到按钮的背景[/color]
可根据需要制作特定的图标,地址:
[url]http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm[/url]
如:
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span>
User
</button>
[size=medium]2.Bootstrap 下拉菜单(Dropdowns)[/size]-div.dropdown ul.dropdown-menu
下拉菜单用的也比较多,如果想要有个看起来不错的下拉菜单,bootstrap是个不错的选择
[color=red]ul.dropdown-menu可单独使用不必必须放在div.dropdown下面,使用者可灵活使用[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1369/225f2885-d764-3b44-ba71-f3d1b90041f5.jpg[/img]
[size=medium]3.Bootstrap 按钮组[/size]-div.btn-group
[img]http://dl2.iteye.com/upload/attachment/0124/1388/648ddb97-c826-3485-8ea8-91464f17d976.jpg[/img]
[size=medium]4.Bootstrap 按钮下拉菜单[/size]-div.btn-group span.cacert
[size=medium]5.Bootstrap 输入框组[/size]-div.input-group
[img]http://dl2.iteye.com/upload/attachment/0124/1390/a650513d-bdcf-3cb4-b828-6f5b0669e8ae.jpg[/img]
[size=medium]6.Bootstrap 导航元素[/size]-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked
[img]http://dl2.iteye.com/upload/attachment/0124/1392/fb871228-4442-3c66-aebe-6d9d5cdfbd5b.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0124/1394/b53dc0f9-4afa-35ec-abd9-572a03f3ca8e.jpg[/img]
[size=medium]7.Bootstrap 导航栏[/size]-nav.navbar nav.navbar-default nav.navbar-fixed-top
[img]http://dl2.iteye.com/upload/attachment/0124/1396/9f0a0f05-f130-3408-b78d-669faa2db884.jpg[/img]
[size=medium]8.Bootstrap 面包屑导航(Breadcrumbs)[/size]-ol.breadcrumb
[color=red]面包屑导航[/color]-表示当前页面所在位置,每个部分可继续导航
以前见过这个导航方式,不过不清楚具体叫什么
[img]http://dl2.iteye.com/upload/attachment/0124/1398/595aa143-36fc-3a4d-98a1-315156815aac.jpg[/img]
[size=medium]9.Bootstrap 分页[/size]-ul.pagination ul.pager
[color=red]翻页也不一定必须放在ul.pager下面,也可以放在ul.pagination一起使用。这些class都是可以灵活使用的[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1400/45eaa454-a786-338d-940f-ec0469c18214.jpg[/img]
[size=medium]10.Bootstrap 标签[/size]-label.label label-default
[img]http://dl2.iteye.com/upload/attachment/0124/1402/f0d419cc-60d9-311d-bb07-b134666d6789.jpg[/img]
[size=medium]11.Bootstrap 徽章(Badges)[/size]-span.badge
[color=red]徽章[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1404/6e8a8c9a-ff80-30fe-a4ad-8c3b132f8f1f.jpg[/img]
[size=medium]12.Bootstrap 超大屏幕(Jumbotron)[/size]-div.jumbotron
[img]http://dl2.iteye.com/upload/attachment/0124/1406/94511018-78ba-3cba-9b23-46704bbdf77f.jpg[/img]
[size=medium]13.Bootstrap 页面标题(Page Header)[/size]-div.page-header
[size=medium]14.Bootstrap 缩略图[/size]-a.thumbnail
[color=red]不是很理解其作用[/color]
[size=medium]15.Bootstrap 警告(Alerts)[/size]-div.alert alert-success
[img]http://dl2.iteye.com/upload/attachment/0124/1408/ea465a7d-2d4d-3067-ade2-358984834ea7.jpg[/img]
[size=medium][color=red]网站上,如果需要对一些信息进行标注。一般对文字或背景设置特殊样式,bootstrap已经帮我们写好了这些特殊样式,直接拿来用就可以了[/color][/size]
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功!很好地完成了提交。
</div>
[size=medium]16.Bootstrap 进度条[/size]-div.progress div.progress-bar
[img]http://dl2.iteye.com/upload/attachment/0124/1410/4c74343e-a1d2-36f4-83ac-fc27fdb089e4.jpg[/img]
[color=red][size=medium]如果想让自己的网站看起来很炫,设计一个界面美观的进度条,是个不错的特性。bootstrap已经写好了样式,拿来用就行。[/size][/color]
[size=medium]17.Bootstrap 多媒体对象(Media Object)[/size]-div.media
[color=red][size=medium]如果开发一些博客类或论文类的网站,在文字中插入一些图片,可能更具有观赏性[/size][/color]
[size=medium]18.Bootstrap 列表组[/size]-ul.list-group li.list-group-item a.list-group-item
[img]http://dl2.iteye.com/upload/attachment/0124/1412/52af6d63-4a1e-3da9-819a-cad3158b3ceb.jpg[/img]
[color=red][size=medium]list-group-item不一定非要放在ul.list-group下面使用,可独立使用如,
a.list-group-item可以有相同的样式效果。只不过放在div.list-group或ul.list-group下面更容易控制位置[/size][/color]
[size=medium]19.Bootstrap 面板(Panels)[/size]
[img]http://dl2.iteye.com/upload/attachment/0124/1428/8e80731c-d34d-3ea7-bda9-f25419d66957.jpg[/img]
[color=red]如果网页的开发中,有需要用到面板,bootstrap已经帮你写好了样式。但是对于我来说,好像用到的也比较少,所以对一些没见过的特性也感到陌生。可能所处的行业有关系,或者一直做后台,没办法接触这些很炫的特性[/color]
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
[size=medium]20.Bootstrap Well[/size]-div.well
[img]http://dl2.iteye.com/upload/attachment/0124/1430/a912ce37-d1e5-3ec4-96e1-595f3a6aca03.jpg[/img]
[size=medium][color=red]Well 是一种会引起内容凹陷显示或插图效果的容器 <div>[/color][/size]
[size=large]Bootstrap 插件[/size]-上面的组件或样式是静态的,插件更多的是交互
[size=medium]1.Bootstrap 插件概览[/size]-集成了12中jquery插件
[size=medium]2.Bootstrap 过渡效果(Transition)插件[/size]-Transition.js
[size=medium]3.Bootstrap 模态框(Modal)插件[/size]-modal.js
data-api:data-toggle="model" data-target="#id" id是模态框div的id
[img]http://dl2.iteye.com/upload/attachment/0124/1555/3c57b408-812c-33e1-989f-3ffa8cd7c4c2.jpg[/img]
[size=medium]4.Bootstrap 下拉菜单(Dropdown)插件[/size]-dropdown.js
[size=medium]5.Bootstrap 滚动监听(Scrollspy)插件[/size]-scrollspy.js
[color=red]根据查看内容的位置,动态标注所在菜单或标签[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1559/472fa52b-fa8e-3b73-9075-1d318ac50786.png[/img]
[size=medium]6.Bootstrap 标签页(Tab)插件[/size]-tab.js
[color=red]动态显示标签下的内容div[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1561/2aad93cb-9b8d-395b-b86d-a1da03e40fd0.png[/img]
[size=medium]7.Bootstrap 提示工具(Tooltip)插件[/size]-tooltip.js
[color=red]鼠标移动,动态显示提示信息[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1563/8d041f21-aab6-32ea-829d-b0280b9876b6.jpg[/img]
[size=medium]8.Bootstrap 弹出框(Popover)插件[/size]-popover.js
[color=red]鼠标点击,弹出窗口信息[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1567/1a893fe8-68d2-3b93-901f-a010169df9aa.png[/img]
[size=medium]9.Bootstrap 警告框(Alert)插件[/size]-
[color=red]这种提示或警告方式似乎更别致一点[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1569/d2680b5e-6db3-36b4-9eef-3e4989bc0d28.png[/img]
[size=medium]10.Bootstrap 按钮(Button)插件[/size]-button.js
[color=red]通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组[/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1571/944987cf-52b1-3055-9268-595692e59b77.png[/img]
[size=medium]11.Bootstrap 折叠(Collapse)插件[/size]-collapse.js
[size=medium][color=red]可以动态的让某个页面区域div显示或影藏[/color][/size]
[img]http://dl2.iteye.com/upload/attachment/0124/1573/25e9b919-5bf8-3241-8469-fdbce34387e5.png[/img]
[size=medium]12.Bootstrap 轮播(Carousel)插件[/size]-carousel.js
[color=red][size=medium]滑动显示内容,一个漂亮的网站必不可少的特性[/size][/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1575/9b65a1b8-7a76-39fe-b977-dd1463c4ad95.png[/img]
[size=medium]13.Bootstrap 附加导航(Affix)插件[/size]-affix.js
[color=red][size=medium]将某个导航栏固定在页面的某个位置,不随页面移动[/size][/color]
[img]http://dl2.iteye.com/upload/attachment/0124/1577/e182f054-b7b3-39a8-ae4f-82d4b8439b0a.png[/img]
[size=large]Bootstrap 其他[/size]
[size=medium]1.Bootstrap UI 编辑器[/size]-像dreamweaver一样设计页面
见:http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
[size=medium]2.Bootstrap HTML编码规范[/size]
[color=red]页面添加如下元素或特性:[/color]
<!DOCTYPE html>
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 兼容模式
<meta charset="UTF-8">
在线参考手册
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor
在线制定图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
http://www.runoob.com/bootstrap/bootstrap-tutorial.html