Java菜鸟学习日记22

BootStrap

• Web UI 框架：可以帮助菜鸟程序员，迅速简便的搭建起专业级界面效果
• 如何快速掌握和利用框架

1. 框架的整合和搭建，让框架能正常跑起来
2. 通过复制粘贴文档中的代码，实验框架中到各个组件，记住关键组件的图像（长什么样）
3. 掌握这个UI框架的布局特性

• Bootstrap需要导入的文件

1. 在head标签中，通过link导入bootstrap.css样式表（核心文件，必须导入）
2. 如果使用bootstrap的交互功能和插件，需要导入
   1. jquery.js
   2. bootstrap.js

• Bootstrap容器
  • .container：宽度是“固定”（不同的浏览器宽度对应不同的尺寸）。居中
  • .container-fluid：100% 两侧有边距
  • 如果没有特殊情况，所有内容都应该放在容器中
• 导航条

• • navbar
  • 两种配色
    • default（浅色系）
    • inverse（深色系）
  • Bootstrap的颜色主题是可以自定义的
  • 行为
    • 默认（圆角、有宽度、随页面滚动）：
    • 固定（直角、100%、可以固定在顶部或者底部）
      • 顶部：navbar-fixed-top
      • 底部：navbar-fixed-bottom
  • 手机模式
    • 会将导航条上的内容隐藏起来，同时在右侧出现一个按钮（汉堡图标）
    • 通过控制隐藏内容显示

• 表格
  • table
  • 形态
    • 默认：只有表格行下横线，标有文字加粗

• • • 交替条纹：每隔一行变成浅灰色

• • • 加框：整个表格有外边框，同时有竖线

• • • 紧缩：单元格空白间距稍小

• • • 鼠标悬停：鼠标指向时变色

• • • 响应式：在手机模式下使用。通过禁止换行和开启横向滚动实现在小屏幕上展示

• 按钮
  • btn
  • 颜色

• • • 默认：btn-default：白色——文字是深色的
    • 成功：btn-success：绿色——文字是白色的
    • 信息：btn-info：浅蓝——文字是白色的
    • 主要：btn-primary：深蓝——文字是白色的
    • 警告：btn-warn：橙色——文字是白色的
    • 危险：btn-danger：红色——文字是白色的
  • 尺寸（主要是高度和文字大小）

• • • 大号：btn-lg
    • 默认
    • 小号：btn-sm
    • 超小：btn-xs
  • 形态
    • 默认：鼠标指向会变色
    • 按下：向下凹陷
    • 禁用：不会变色，鼠标指针会变成禁止图标，颜色发白
    • 块按钮：手机模式。通过btn-block将按钮设置为宽度撑满容器
• 表单

<form>

.form-group

<label>

.form-control

• • 形态
    • 默认：上下结构，form-group及其内部的label与form-control都是上下排列

• • • 水平表单：form-group仍然是上下排列，但其内部的label与form-control是左右排列

• • • 行内表单：左右结构，form-group及其内部全部左右排列
    • 导航条内表单：专门在导航条内使用

• • Bootstrap的单选框和复选框

形态

垂直排列：

div.checkbox

label

intput[type=checkbox]

/label

/div

水平排列：

label.checkbox-inline

input[type="checkbox"]

/label

• • 静态控件：实际上不是表单控件，存在的目的是将非表单控件与表单控件对齐
  • 表单控件的3钟状态：
    • 默认：可编辑可选择
    • 只读：不可编辑可选择
      • <input readonly>
    • 禁用：不可编辑不可选择
      • 成片禁用多个表单控件：用<fieldset disable>包住多个表单控件
  • 表单控件的装饰

1. 添加帮助文本
2. 左侧addon
3. 右侧加图标（通常用来做输入验证）

• 分页
  • pagination：方形、有上一页、下一页，页码

• 翻页
  • pager：圆角、没有页码、可以水平居中或两端对齐

• 面板
  • .panel
    • .panel-heading
    • .panel-body
  • 圆角矩形区域，可以带标题栏，也可以不带

• 图标
  • Bootstrap自带图标，比较少
  • 推荐使用font-awesome图标（需要css和fonts这两个文件夹，同时在页面上导入font-awesome.css）
  • <i class="glyphicon glyphicon-图标名">
  • <i class="fa fa-图标名">
  • 嵌套使用
    • <a class="btn btn-success">
      • <i class="fa fa-图标名">按钮
    • </a>
    • <a class="btn btn-success fa fa-search">按钮</a>

插件的使用规律

1. 必须导入jquery.js和bootstrap.js这个js脚本，否则不能正常工作
2. 插件可以通过html属性实现基本功能（如：打开、关闭。此时不需要写js代码）
3. 如果想实现更多的控制，需要写js

模态框

通过html属性控制模态框打开和关闭的重要属性

1. 按钮上2个
   1. date-toggle="modal"
   2. date-target="样式类或样式id"指定要打开的模态框
2. 关闭
   1. 在模态框内部的任意按钮或标签上：data-dismiss="modal”会关闭当前所在模态框

通过js控制模态框的打开和关闭

使用$()找到模态框，然后调用modal()方法，传入文档中指明的参数即可

$('#模态框id').modal('show')：打开

$('#模态框id').modal('hide')：关闭

模态框基本样式

.modal

.modal-dialog

.modal-content

.modal-header

.modal-body

.modal-footer

下拉菜单

dropdown

btn

caret

ul.dropdown-menu

基本不需要用js控制

选项卡

ul.nav.nan-tabs

li.active(激活项)>a [href="# id"][ date-toggle=tab]

.tab-content

.tab-pane[id]

Tooltip/Popover：弹出提示

因为性能原因，默认没有激活，需要在页面底部加上相应的方法调用初始化以下

$("样式类或id").tooltip();

$("样式类或id").popover();

Bootstrap布局特性-栅格系统

• • 容器.container被栅格系统平分成12份（12列）
  • 通过col-lg/md/sm/xs-1（1-12）表示标签所占的份数
  • 如果col-*-x中的x之和超过12，则超过的标签换行
  • 注意：
    • lg：表示宽屏桌面显示器的尺寸
    • md：方屏显示器的尺寸
    • sm：平板
    • xs：手机
    • 如果浏览器尺寸比col-[*]-1大，则指定的列有效。
    • 如果浏览器尺寸比col-[*]-1小，则指定的列无效，将变成”100%”

.container这个容器，左右各有15px的padding

• 如果发现因为这15px的padding导致不能对齐，则在container添加.row来抵消15px

列的位置可以通过

• • col-*-pull-1：往左边拉
  • col-*-push-1：往右边推
  • 只在列有效时起作用！
• 列的在拆分（列嵌套）
  • 在col-*-1中，使用.row作为容器，可以再次拆分列
  • 使用.container不行