Bootstrap

 

1 、了解各种UI框架

[1]Bootstrap （Web框架） 编辑   http://www.bootcss.com/

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

[2] Jquery EasyUI  http://www.jeasyui.net/

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

[3]ExtJs   http://extjs.org.cn/

Sencha Ext JS 6.6已经支持NPM包和开放工具。Ext JS 6.6现在可以通过NPM包让开发人员使用已经相当熟悉的异常简单的工作流。现在，Ext JS开发人员可以是强大的开放式工具来快速生成、构建和更新Ext JS应用程序。Ext JS 6.6还带来了一些主要的增强，如新的现代工具包组件、新的美丽的可访问主题、现代工具包本地化、高级路由和几个Ext JS组件和框架的增强。

 

2 、 安装bootstrap

下载地址：https://v3.bootcss.com/getting-started/#download

解压压缩包

三个文件夹中分别是boostrap使用的js文件和css文件，还有字体文件。

在页面中引用bootstrap

3 、 boostrap的栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

 

4 、 boostrap的各种组件

4.1表格样式

[1]基本表格样式

给表格添加样式 .table

[2]条纹状表格样式

通过 .table-striped 类可以给  之内的每一行增加斑马条纹样式

[3]带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

[4]鼠标悬浮的高亮色

通过添加 .table-hover 类可以让  中的每一行对鼠标悬停状态作出响应。

[5]紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

操作方式一样，添加对应的样式即可。

[6]状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

[7]响应表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

4.2表单样式

[1]最基本的表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、</span></code> <span style="color:#333333;">和</span> <code><span style="color:#c7254e;"><select></span></code> <span style="color:#333333;">元素都将被默认设置宽度属性为</span> <code><span style="color:#c7254e;">width: 100%;</span></code><span style="color:#333333;">。</span> <span style="color:#333333;">将</span> <code><span style="color:#c7254e;">label</span></code> <span style="color:#333333;">元素和前面提到的控件包裹在</span> <code><span style="color:#c7254e;">.form-group</span></code> <span style="color:#333333;">中可以获得最好的排列。</span></p> <table border="1"> <tbody> <tr> <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0cm;">         <form></p> <p style="margin-left:0cm;">           <div class="form-group"></p> <p style="margin-left:0cm;">             <label for="exampleInputEmail1">Email address</label></p> <p style="margin-left:0cm;">             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></p> <p style="margin-left:0cm;">           </div></p> <p style="margin-left:0cm;">           <div class="form-group"></p> <p style="margin-left:0cm;">             <label for="exampleInputPassword1">Password</label></p> <p style="margin-left:0cm;">             <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></p> <p style="margin-left:0cm;">           </div></p> <p style="margin-left:0cm;">           <div class="form-group"></p> <p style="margin-left:0cm;">             <label for="exampleInputFile">File input</label></p> <p style="margin-left:0cm;">             <input type="file" id="exampleInputFile"></p> <p style="margin-left:0cm;">             <p class="help-block">Example block-level help text here.</p></p> <p style="margin-left:0cm;">           </div></p> <p style="margin-left:0cm;">           <div class="checkbox"></p> <p style="margin-left:0cm;">             <label></p> <p style="margin-left:0cm;">               <input type="checkbox"> Check me out</p> <p style="margin-left:0cm;">             </label></p> <p style="margin-left:0cm;">           </div></p> <p style="margin-left:0cm;">           <button type="submit" class="btn btn-default">Submit</button></p> <p style="margin-left:0cm;">         </form></p> </td> </tr> </tbody> </table> <p style="margin-left:0cm;"><a href="http://img.e-com-net.com/image/info8/44f29a6945a04cc29824baf3bd9ab8f1.jpg" target="_blank"><img alt="Bootstrap_第10张图片" class="has" height="270" src="http://img.e-com-net.com/image/info8/44f29a6945a04cc29824baf3bd9ab8f1.jpg" width="554" style="border:1px solid black;"></a></p> <p style="margin-left:0cm;"><strong>[2]</strong> <strong>内联表单</strong></p> <p style="margin-left:0cm;"><span style="color:#333333;">为</span> <code><span style="color:#c7254e;"><form></span></code> <span style="color:#333333;">元素添加</span> <code><span style="color:#c7254e;">.form-inline</span></code> <span style="color:#333333;">类可使其内容左对齐并且表现为</span> <code><span style="color:#c7254e;">inline-block</span></code> <span style="color:#333333;">级别的<strong>控件。<strong>只适用于视口（</strong></strong></span><strong><span style="color:#333333;">viewport</span></strong><strong><span style="color:#333333;">）至少在</span></strong><strong><span style="color:#333333;"> 768px </span></strong><strong><span style="color:#333333;">宽度时（视口宽度再小的话就会使表单折叠）</span></strong></p> <table border="1"> <tbody> <tr> <td style="vertical-align:top;width:426.1pt;"> <p style="margin-left:0cm;"><form class="form-inline"></p> <p style="margin-left:0cm;">                     <div class="form-group"></p> <p style="margin-left:0cm;">                       <label for="exampleInputName2">Name</label></p> <p style="margin-left:0cm;">                       <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></p> <p style="margin-left:0cm;">                     </div></p> <p style="margin-left:0cm;">                     <div class="form-group"></p> <p style="margin-left:0cm;">                       <label for="exampleInputEmail2">Email</label></p> <p style="margin-left:0cm;">                       <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></p> <p style="margin-left:0cm;">                     </div></p> <p style="margin-left:0cm;">                     <button type="submit" class="btn btn-default">Send invitation</button></p> <p style="margin-left:0cm;">                   </form></p> </td> </tr> </tbody> </table> <p style="margin-left:0cm;"><a href="http://img.e-com-net.com/image/info8/15c2beedc9f04b478b6a259d57df5393.jpg" target="_blank"><img alt="" class="has" height="60" src="http://img.e-com-net.com/image/info8/15c2beedc9f04b478b6a259d57df5393.jpg" width="554"></a></p> <p style="margin-left:0cm;"><strong>[3]</strong> <strong>水平排列的表单</strong></p> <p style="margin-left:0cm;"><a href="http://img.e-com-net.com/image/info8/2823c5b9b5a04737beffe1413a392e65.jpg" target="_blank"><img alt="Bootstrap_第11张图片" class="has" height="231" src="http://img.e-com-net.com/image/info8/2823c5b9b5a04737beffe1413a392e65.jpg" width="554" style="border:1px solid black;"></a></p> <p style="margin-left:0cm;"><strong>[4]</strong><strong>输入框</strong></p> <p style="margin-left:0cm;"><span style="color:#333333;">包括大部分表单控件、文本输入域控件，还支持所有</span><span style="color:#333333;"> HTML5 </span><span style="color:#333333;">类型的输入控件：</span> <code><span style="color:#c7254e;">text</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">password</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">datetime</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">datetime-local</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">date</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">month</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">time</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">week</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">number</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">email</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">url</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">search</span></code><span style="color:#333333;">、</span><code><span style="color:#c7254e;">tel</span></code> <span style="color:#333333;">和</span> <code><span style="color:#c7254e;">color</span></code><span style="color:#333333;">。</span></p> <p style="margin-left:0cm;"> </p> <p style="margin-left:0cm;"><strong><input class="form-control" type="text"></strong></p> <p style="margin-left:0cm;"><strong>[5]</strong> <strong>文本域</strong></p> <p style="margin-left:0cm;"><span style="color:#333333;">支持多行文本的表单控件。可根据需要改变</span> <code><span style="color:#c7254e;">rows</span></code> <span style="color:#333333;">属性。</span></p> <p style="margin-left:0cm;"><strong><textarea class="form-control" rows="3">

[6] 多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

Option one is this and that—be sure to include why it's great                                                                                                                               Option two is disabled                                                                                                                                 Option one is this and that—be sure to include why it's great                                                                                                                              Option two can be something else and selecting it will deselect option one                                                                                                                               Option three is disabled

内联单选和多选框

1                                                            2                                                            3                                                              1                                                            2                                                            3

[7] 下拉列表（select）

1                      2                      3                      4                      5

[8] 静态控件

Email                             [email protected]                                                 Password

[9] Help text

[10] 校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

[11] 控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

4.3按钮样式

[1] 可作为按钮使用的标签或元素

为 、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

[2] 预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

[3]按钮的尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

[4]基本按钮组

[5] 按钮工具栏

把一组 

 组合进一个 

 中就可以做成更复杂的组件。

[6]按钮组尺寸

[7]按钮组中的嵌套

在按钮组中又添加了一个按钮组

[8] 垂直排列

[9] 按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

分列式下拉菜单

[10] 向上弹出式菜单

5 、 案例

效果:

用户列表

添加新用户:

 

 

欢迎使用极客后台管理系统                                                                                                                                                                 系统管理                                                          退出系统                      修改密码                                                              用户管理                                                           用户列表                      添加用户

 

 

首页            用户管理            用户列表                                                                                  姓名                                                                                         电话                                                                                        性别                                                           男                                                                                       女                                                                       查询                      添加新用户                                                                                                                                                                                                                                                                # 姓名 年龄 性别 电话 操作 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120                    alert(1);()" class="glyphicon glyphicon-pencil"> 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120 1 阿三 18 男 120                                                                           «                                          1              2              3              4              5                                              »                                                                                             ×         添加新用户                                                                                          Email                                                                                                                                         Email                                                                                                                                         Email                                                                                                                                         Email                                                                                                                                         Password                                                                                                                                                                                                                          Remember me                                                                                                                                                                      Sign in                                                                                           取消         保存