day07 jQuery的UI库: Bootstrap: 组件插件

前端三大框架: vue angular react

后端三大框架: django flask tonado

前端三大工具: grant gulp webpack(最火)

一.演示: 使用nodejs开启http server: 前端的后端语言也可以开启服务器.

var http = require('http'); //引入内置模块http的方式

var app = http.createServer(function (req,res) {

res.setHeader('Content-Type','text/html');

res.setHeader('X-Foo','bar');

res.writeHead(200,{'Content-Type':'text/plain;charset=utf-8'}); //响应中文

res.end('八戒爱谁谁')

});

app.listen(8088);

>node index.js //开启服务器

http://localhost:8088/ //访问服务器 //这里默认有两个请求:一个对页面的,一个对.ico图标的

二.jQuery的UI库: Bootstrap框架

1.Bootstrap介绍

2.起步

3.全局css样式

4.组件

包含了html,css,JavaScript插件,为了组件的复用,组件化开发

4.1.Glyphicons 字体图标

4.1.1.所有可用的图标

包括: 250个

4.1.2.如何使用

<span class="glyphicon glyphicon-home"></span> //不要和其他组件混合使用,只对内容为空的元素起作用,应该创建一个嵌套的span标签

4.1.3.实例

4.2.下拉菜单

4.2.1.实例

class="dropdown" //向下弹出

class="dropup" //向上弹出

4.2.2.对齐

class="dropdown-menu dropdown-menu-right" //默认是左对齐,改成右对齐用这个

4.2.3.标题

class="dropdown-header" //下拉菜单中的标题

4.2.4.分割线

role="separator" class="divider" //分割线

4.2.5.禁用的菜单项

class="disabled"

4.3.按钮组

通过这个容器把一组按钮放在同一行里

4.3.1.基本实例

class="btn-group"

role="group" //屏幕阅读器需要加这个

4.3.2.按钮工具栏

class="btn-toolbar" //把按钮组组合进这个里面: 可以做成更复杂的组件

4.3.3.尺寸

class="btn-group btn-group-lg"

class="btn-group btn-group-sm"

class="btn-group btn-group-xs"

4.3.4.嵌套

class="btn-group" //只需把一个class="btn-group"放入另一个class="btn-group"中

4.3.5.垂直排列

class="btn-group-vertical"

4.3.6.两端对齐排列的按钮组

class="btn-group btn-group-justified"

class="btn-group" //如果是button元素,还需要加入到class="btn-group"里面

4.4.按钮式下拉菜单

4.4.1.单按钮下拉菜单

class="btn btn-default dropdown-toggle" //只需要把任意一个按钮放入到按钮组里即可

4.4.2.分裂式按钮下拉菜单

class="sr-only" //隐藏元素: 只需要多一个分开的按钮

4.4.3.尺寸

class="btn btn-default btn-lg dropdown-toggle"

class="btn btn-default btn-sm dropdown-toggle"

class="btn btn-default btn-xs dropdown-toggle"

4.4.4.向上弹出式菜单

class="btn-group dropup"

4.5.输入框组

4.5.1.基本实例

class="input-group"

class="input-group-addon" //在输入框一侧添加额外元素: 一侧只能添加一个额外的元素

4.5.2.尺寸

class="input-group input-group-lg"

class="input-group input-group-sm"

4.5.3.作为额外元素的多选框和单选框

可以将多选框或单选框作为额外元素添加到输入框组中

4.5.4.作为额外元素的按钮

class="input-group-btn" //不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素

4.5.5.作为额外元素的按钮式下拉菜单

4.5.6.作为额外元素的分裂式按钮下拉菜单

4.5.7.multiple buttons

4.6.导航

4.6.1.标签页

class="nav nav-tabs"

4.6.2.胶囊式标签页

class="nav nav-pills"

class="nav nav-pills nav-stacked" //胶囊的垂直排列

4.6.3.两端对齐

class="nav nav-tabs nav-justified"

4.6.4.禁用的链接

class="disabled"

4.6.5.添加下拉菜单

4.7.导航条

务必使用nav标签,如果使用div标签,务必设置role="navigation" 属性,让人家知道这是一个导航区域

4.7.1.默认样式的导航条

class="navbar navbar-default"

class="container-fluid"

class="navbar-header"

class="navbar-brand"

4.7.2.品牌图标

将class="navbar-brand"的地方替换为img标签即可

4.7.3.表单

class="navbar-form navbar-left"

4.7.4.按钮

class="btn btn-default navbar-btn" //可以让它在导航条里垂直居中

4.7.5.文本

class="navbar-text" //通常使用p标签

4.7.6.非导航的链接

class="navbar-link" //给a标签加上这个类名

4.7.7.组件排列

class="navbar-form navbar-left"

class="navbar-form navbar-right"

4.7.8.固定在顶部

class="navbar navbar-default navbar-fixed-top" //还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中

4.7.9.固定在底部

class="navbar navbar-default navbar-fixed-bottom"

4.7.10.静止在顶部

class="navbar navbar-default navbar-static-top"

4.7.11.反色的导航条

class="navbar navbar-inverse"

4.8.路径导航

class="breadcrumb"

4.9.分页

4.9.1.默认分页

class="pagination"

class="disabled"

class="pagination pagination-lg"

class="pagination pagination-sm"

4.9.2.翻页

class="pager"

class="previous" //两端对齐

class="next"

4.10.标签

标记:

class="label label-default"

class="label label-primary"

class="label label-success"

class="label label-info"

class="label label-warning"

class="label label-danger"

4.11.徽章

<span class="badge">42</span> //给链接或导航等元素嵌套这个标签

4.12.巨幕

class="jumbotron"

4.13.页头

class="page-header" //能为h1标签增加适当的空间,并且与页面的其他部分形成一定的分隔

<small>Subtext for header</small> //里面还可以嵌套small标签

4.14.缩略图 thumbnail

4.15.警告框

4.16.进度条

4.16.1.基本实例

<span class="sr-only">60% Complete</span>

</div>

4.16.2.带有提示标签的进度条

把上面的 class="sr-only" 去掉

style="min-width: 2em;" //当展示很低的百分比,如果需要让文本提示能够显示出来,可设置这个属性

4.16.3.根据情境变化效果

class="progress-bar progress-bar-success"

class="progress-bar progress-bar-info"

class="progress-bar progress-bar-warning"

class="progress-bar progress-bar-danger"

4.16.4.条纹效果

class="progress-bar progress-bar-success progress-bar-striped"

4.16.5.动画效果

class="progress-bar progress-bar-striped active"

4.16.6.堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果

<span class="sr-only">35% Complete (success)</span>

</div>

<span class="sr-only">20% Complete (warning)</span>

</div>

<span class="sr-only">10% Complete (danger)</span>

</div>

4.17.媒体对象

4.18.列表组

4.18.1.基本实例

4.18.2.徽章

给列表组加入徽章组件，它会自动被放在右边

4.18.3.链接

用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组;还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签

4.18.4.button items

列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了）注意不要使用标准的 .btn 类

4.18.5.被禁用的条目

class="list-group-item disabled"

4.18.6.情境类

class="list-group-item list-group-item-success"

class="list-group-item list-group-item-info"

class="list-group-item list-group-item-warning"

class="list-group-item list-group-item-danger"

4.18.7.定制内容

4.19.面板

4.19.1.基本实例

class = "panel panel-default" //默认的面板: 只是设置了基本的边框border和内补padding

class = "panel-body"

4.19.2.带标题的面板

class = "panel-heading" //可以设置加入一个标题容器

class = "panel-title" //通过设置h1~h6标签的class="panel-title",可以设置标题的样式

4.19.3.带注脚的面板

class = "panel-footer" //注脚不会从情境效果中继承颜色

4.19.4.情境效果

class = "panel panel-primary" //设置标题的背景色: 蓝色

class = "panel panel-success" //设置标题的背景色: 绿色

class = "panel panel-info" //设置标题的背景色: 浅蓝色

class = "panel panel-warning" //设置标题的背景色: 黄色

class = "panel panel-danger" //设置标题的背景色: 红色

4.19.5.带表格的面板

class = "table" //把表格嵌入到面板中,也可以把class = "panel-body"直接用class="table"替换

4.19.6.带列表组的面板

class = "list-group" //把列表组嵌入到面板中, ul的类

class = "list-group-item" //li的类

4.20.具有响应式特性的嵌入内容

4.21.Well

5.JavaScript插件

5.1.概览

5.2.过渡效果

5.3.模态框√

modal.js: 模态框经过了优化，更加灵活，以弹出对话框的形式出现

不支持同时打开多个模态框,务必将模态框的html代码放在文档的最高层级内,尽量作为body标签的直接子元素

5.3.1.实例

//data-toggle="modal"对应的是js要操作的modal

//data-target="#myModal"对应的是js要操作的的modal

data-dismiss="modal" //关闭模态框

5.3.2.sizes

class="modal fade bs-example-modal-lg"

class="modal fade bs-example-modal-sm"

5.3.3.remove animation

如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可

5.3.4.varying content based on trigger button

5.3.5.用法

方式一: 通过data属性data-toggle="modal"或者data-target="#myModal"

方式二: 通过js的调用$('#myModal').modal(options)

5.3.6.参数

5.3.7.方法

$('#myModal').modal('handleUpdate')

$('#myModal').modal('hide')

$('#myModal').modal('show')

$('#myModal').modal('toggle')

5.3.8.事件

5.4.下拉菜单

5.5.滚动监听

5.6.标签页

5.7.工具提示

5.8.弹出框

5.9.警告框

5.10.按钮

5.11.collapse√

手风琴效果 (collapse 塌陷)

5.12.carousel√

轮播图效果 (carousel 旋转木马)

5.13.affix

6.定制

7.网站实例

8.css的介绍

day07 jQuery的UI库: Bootstrap: 组件 插件

猜你喜欢

day07 jQuery的UI库: Bootstrap: 组件插件