day07のjQuery UIライブラリー：ブートストラップ：コンポーネントプラグイン

3つのフロントエンドフレームワーク：VUEの角度反応

スリーバックエンドのフレームワーク：Djangoのフラスコtonado

3つのフロントエンドツール：助成金の一気のWebPACK（最も熱いです）

デモ：使用は、オープンhttpサーバをnodejs：フロントエンド、バックエンドの言語も、サーバーの電源をオンにすることができます。

VARのhttp =が必要です（「HTTP」）; // HTTPに導入された内蔵のモジュール方式

VARアプリ= http.createServer（関数（REQ、RES）{

res.setHeader（ 'Content-Typeの'、 'text / htmlの'）;

res.setHeader（ 'X-はFoo'、 'バー'）;

res.writeHead（200、{ 'のContent-Type'： 'text / plainの;のcharset = UTF-8'}）; //応答中国語

res.end（ 'ジャーニー¥CK'）

}）;

app.listen（8088）。

>ノードindex.js //は、サーバーの電源をオンに

http：// localhostを：8088 / // //デフォルトのアクセスサーバ2つの要求がありますページの1組は、1組.icoファイルのアイコン

二.jQuery UIライブラリー：ブートストラップフレームワーク

1.Bootstrapはじめに

2.スタート

3.グローバルCSSスタイル

4.コンポーネント

これは、HTML、CSS、JavaScriptのプラグイン、再利用部品のために、コンポーネントベースの開発が含まれています

4.1.Glyphiconsフォントアイコン

4.1.1使用可能なすべてのアイコン

含む：250

4.1.2。どのように使用します

<スパンクラス=「glyphicon glyphicon-ホーム」> </ span>を//他のコンポーネント、仕事に空の要素の内容だけを混ぜて使用しないでください、あなたは、ネストされたspanタグを作成する必要があります

4.1.3。例

4.2。ドロップダウンメニュー

4.2.1。例

クラス=「ドロップダウン」//ポップダウン

クラス=「dropup」//ポップアップ表示

4.2.2。位置合わせ

クラス=「ドロップダウンメニューのドロップダウン・メニューから右」//デフォルトは左揃え、この変更で右詰めされ

4.2.3。タイトル

クラス=タイトル「のドロップダウン・ヘッダ」//ドロップダウンメニュー

4.2.4。分割ライン

役割=「区切り」クラス=「分周器」//パーティングライン

4.2.5。メニュー項目を無効にします

クラス=「無効」

4.3。ボタンのグループ

同じライン上のボタンのセットにより、このコンテナ

4.3.1。基本的な例

クラス= "BTN-グループ"

これを追加する役割=「グループ」//スクリーンリーダーのニーズ

4.3.2。ツールバーボタン

より複雑なコンポーネントを行うことができます。このボタンの組み合わせにクラス=「BTN-ツールバー」//プット

4.3.3。外形寸法

クラス= "BTN-グループBTN-グループ-LG"

クラス= "BTN-グループBTN-グループ-SM"

クラス= "BTN-グループBTN-グループ-XS"

4.3.4。ネスティング

別のクラス=「BTN-グループ」へのクラス=「BTN-グループ」//単にクラス=「BTN-グループ」

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ライブラリー：ブートストラップ：コンポーネントプラグイン

おすすめ