Html、Css、JavaScript是前端程序员必懂的基础知识； 但是只使用这些基础知识，80%的工程师不能做出任何项目，如果能，那你一定是大神
作为后端有必要记录一下依赖这三种语言的流行UI框架 ———— bootstrap！ 后面，我也会适当更新一些，当前更流行的JavaScript UI框架 ———— iView！
简介
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的WEB项目. jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库.
四、控件相关的设置
1). 单行文本
标语关联必须使用label, 默认行元素
<label for="uemail">用户名:</label>
<input type="text" name="uname" id="uemail" placeholder="输入名称">
<label for="uaddr">用户密码:</label>
<input type="password" name="uemail" id="uaddr" placeholder="输入邮箱">
label ==> style="margin-right:20px", 可以设置标语与关联框的间隔 input => style="width: 440px" 可以设置输入框宽度 用户名和密码同行时, 采用栅格布局法:<div class="row">
案例如下：
<div class="row text-success lead" style="margin-bottom: 10px">
<div class="col-md-6 text-right">
<label for="uemail1">用户名: </label>
<input type="text" class="lead" name="uname" id="uemail1" placeholder="请输入名称">
</div>
<div class="col-md-6 text-left">
<label for="uaddr1"> 用户邮箱: </label>
<input type="password" name="uemail" id="uaddr1" placeholder="输入邮箱">
</div>
</div>
2). 多行文本
标语关联必须使用label, 默认行元素
<label for="udesc" class="text-warning"> 用户描述: </label>
<textarea name="udesc" id="udesc">什么玩意？</textarea>
textarea.style="width: 500px" 可以设置输入框宽度
3). 单选控件
单选控件是通过名字(name)来确定是否属于同组的
a) 标语在前, 组内默认位于同行
<label for="k1" class="text-info"> 男 </label>
<input type="radio" name="sex" value="v1" id="k1">
b) 标语在后, 组内默认位于同行(可以不设置for='id')
<label class="radio-inline text-success">
<input type="radio" name="sex" value="v1"> 女 </label>
c) label.radio-inline
只适于标语在后，效果不大
4). 多选控件
多选控件是也要设置相同的名字(name)，确定是否属于同组的
a) 标语在前, 组内默认位于同行
<label for="k2" class="text-info"> 健身 </label>
<input type="checkbox" name="hobby" value="v1" id="k2">
b) 标语在后, 组内默认位于同行(可以不设置for='id')
<label class="text-success">
<input type="checkbox" name="hobby" value="v1"> 女 </label>
c) label.radio-inline
只适于标语在后，效果不大
5). 选择控件
没有太多改变, 默认的html; multiple
<label for="selid" class="text-primary"> 你居住在： </label>
<select class="text-info" id="selid">
<option value='a1'> ... </option>
</select>
6). 控件大小
input.input-lg/input-sm ==> 大控件/小控件 .col-lg-*
7). 按钮控件
再Bootstrap体系里, 按钮的基础html元素可以是:
<a> <button> <input> <div>, 官方推荐 button
- 基础类: .btn
- 风格设置: btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger
- 大小样式: btn-lg/btn-sm/btn-xs/btn-link/btn-block(全行)
- 其他: active/disabled <div class="btn-group"> ..按钮组.. <div>
8). 表单控件
<form role="form"> ... </form>
- 表单内每个控件都包裹在: div.form-group
- 设置标语与输入框位一行: div.form-inline
- 设置所有控件位于一行: form.form-inline
- 并且每个输入控件设置类: subem.form-control (框体变大)
联合栅格系统: form.form-horizontal (集成了row类,可以任意摆放位置)
案例如下:
<div class="from-group form-inline" style="margin-bottom: 10px">
<label for="uemail2" style="margin-right: 20px">用户名: </label>
<input type="text" class="form-control" style="width: 300px"
name="uname" id="uemail2" placeholder="请输入名称">
</div>
可以支持的控件： text、password、datetime、datetime-local、date、month、 time、week、number、email、url、search、tel color
9). 辅助类
a) 背景色 div.[bg-primary/bg-success/bg-info/bg-warning/bg-danger] b) 块居中 div.[center-block] c) 清除浮动 div.clearfix d) 三角符号 span.caret
五、组件相关的设置
++控件需要使用到jQuery/bootstrap.min.js能力,提前引入++
1). 下拉菜单
外层:ul.nav navbar-default 容器:li.dropdown
条件:a.dropdown-toggle 且添加属性 data-toggle="dropdown"
菜单:ul.dropdown-menu 这样无序列表会隐藏到按钮后面
aria-labelledby=“dropdownMenu1” -> 关联button-id,作用未知
菜单项:li.divider 且role=“separator” 可以是分割线
li.dropdown-header 可以是浅字体分割区
li.disabled 通过class禁用
一般菜单项在 <a.href>标签上
2). 下拉按钮
容器: div.dropdown
条件:button.dropdown-toggle 且添加属性 data-toggle="dropdown"
btn btn-primary 且默认属性 type="button"
菜单:ul.dropdown-menu 这样无序列表会隐藏到按钮后面
aria-labelledby=“dropdownMenu1” -> 关联button-id,作用未知
菜单项:li.divider 且role=“separator” 可以是分割线
li.dropdown-header 可以是浅字体分割区
li.disabled 通过class禁用
一般菜单项在 <a.href>标签上
额外的: div.dropdown 向下菜单 div.dropup 向上菜单
3). 按钮组
定义: div.btn-group role="group"
或者: div.btn-toolbar role="toolbar"
垂直按钮组: div.++btn-group-vertical++ role="group"
btn-group的上级可以设置class="btn-toolbar" 实时上：把任何一个按钮放到<btn-group>中并添加样式，就可以变成下拉式菜单
4). 表单组
定义: div.input-group 内部放一个<input>控件
添加: span.input-group-addon 将整个标志添加到表单组中
div.input-group <span class="input-group-addon">姓名: </span> <input type="text" class="form-control" placeholder="Username"
div.input-group
input.form-control type='text'
添加前缀/后缀的{字符|按钮}并设置同行
span.input-group-addon
span.input-group-btn
还可以在span内部添加{单选|复选}标志
input type='checkbox'
input type='radio'
还可以添加下拉菜单
div.input-group-btn 下面增加 <button>&<ul.dropdown-menu>
5). 导航
导航条是一种无序标签<ul>...</ul>
ul.nav {nav-tabs|nav-pills|nav-stacked}
nav-tabs => 横向标签式导航
nav-pills => 横向按钮式导航
nav-stacked => 竖向导航(只配合 = nav-pills)
nav-justified => 平铺两端对齐
li.active 并添加属性 role="presentation"
a.herf => 真正的导航菜单
如果这个导航带下拉菜单:
li.dropdown
a.dropdown-toggle 并添加属性 data-toggle="dropdown"
ul.dropdown-menu 并添加属性 role="menu"
li 添加属性 role="menuitem"
a.herf => 设置真正的子菜单
6). 导航条
第一种 <div.nav navbar role="navigation" ...> 第二种 <nav.navbar >... </nav>
以nav标签为例：
nav.navbar => 类型为导航条
navbar-default ==> 浅白
navbar-inverse ==> 反色
navbar-light <==> navbar-dark ==> 无色,与body同色
navbar-fixed-top 固定在顶部,宽度100% 非100%使用container
navbar-fixed-bottom 固定在底部,宽度100% 非100%使用container
div.container
div.navbar-header -> a.navbar-brand 表示左上角公司logo
div.collapse navbar-collapse -> ul{导航信息}
导航条内还可以容纳哪些元素： 1）搜索框
form.navbar-form navbar-left 呈现很好的垂直对齐
div.form-group -> input.form-control
2）按钮
button.navbar-btn 可以垂直居中
或者放到 form 里则不需要 button.btn btn-default
3）文本
p.navbar-text 呈现很好的行距和颜色[可以用在span/label/a/p/div等]
4）链接
a.navbar-link/navbar-brand 显示超链接行为(后者也是类似效果)
以上元算都可以使用: navbar-right/navbar-left 最后,路径导航:
ol.breadcrumb li 每级li标签默认一个层级
7). 警告框
它会嵌入到页面上, 并呈现了一定的基本色
div.alert alert-success role="alert"
dev.alert alter-info role="alert"
dev.alert alter-warning role="alert"
dev.alert alert-danger role="alert"
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
如果警告框可以关闭: div.alert alert-info alert-dismissible role="alert" <button class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"> 关闭 </span> </button> {{ message }} </div>
8). 进度条
div.progress 基框架
div.progress-bar role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 子功能类: progress-bar-[info/warning] 一种带格式的样式 progress-bar-striped 带上条纹样式, 配合 active 类显示滚动效果
9). 面板
div.panel 基类
样式搭配:
panel-default => 默认样式
panel-primary => 深蓝色提示
panel-success => 绿色提示
panel-info => 浅蓝色提示
panel-warning => 黄色提示
panel-danger => 红色提示
结构体系:
div.panel-heading => 面板标头 div.panel-body => 面板主体 div.panel-footer => 面板脚注
带表格 直接在div.panel-body下跟一个table.table 直接在div.panel-body下跟一个ul.list-group
10). 媒体对象 media-object
ul.media-list 一个大的媒体列表
li.media 类似'row'效果为一行，分为左右两部分
div.media-body - 其中一部分
div.media-heading 标题信息
a.media-left/media-right - 另一部分必然是
meida-middle/media-bottom
