Bootstrap

最新推荐文章于 2023-02-08 21:25:57 发布

小靖砸

最新推荐文章于 2023-02-08 21:25:57 发布

阅读量370

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_40933428/article/details/86541016

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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 类可以给 <tbody> 之内的每一行增加斑马条纹样式

[3]带边框的表格

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

[4]鼠标悬浮的高亮色

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

[5]紧缩表格

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

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

[6]状态类

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

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

[7]响应表格

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

4.2表单样式

[1]最基本的表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form>

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

[2] 内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）

</div>

<label for="exampleInputEmail2">Email</label>

</div>

<button type="submit" class="btn btn-default">Send invitation</button>

</form>

[3] 水平排列的表单

[4]输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<input class="form-control" type="text">

[5] 文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

<textarea class="form-control" rows="3"></textarea>

[6] 多选和单选框

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

<label>

Option one is this and that—be sure to include why it's great

</label>

</div>

<label>

Option two is disabled

</label>

</div>

<label>

Option one is this and that—be sure to include why it's great

</label>

</div>

<label>

Option two can be something else and selecting it will deselect option one

</label>

</div>

<label>

Option three is disabled

</label>

</div>

内联单选和多选框

<input type="checkbox" id="inlineCheckbox1" value="option1"> 1

</label>

<input type="checkbox" id="inlineCheckbox2" value="option2"> 2

</label>

<input type="checkbox" id="inlineCheckbox3" value="option3"> 3

</label>

<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1

</label>

<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2

</label>

<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3

</label>

[7] 下拉列表（select）

</select>

[8] 静态控件

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">email@example.com</p>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

</div>

</form>

[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] 可作为按钮使用的标签或元素

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

[2] 预定义样式

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

[3]按钮的尺寸

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

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

[4]基本按钮组

[5] 按钮工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

[6]按钮组尺寸

[7]按钮组中的嵌套

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

[8] 垂直排列

[9] 按钮式下拉菜单

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

分列式下拉菜单

[10] 向上弹出式菜单

5 、案例

效果:

用户列表

添加新用户:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>欢迎使用极客后台管理系统</h1>

</div>

系统管理

</a>

</h4>

</div>

</ul>

</div>

用户管理

</a>

</h4>

</div>

</ul>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

function showWin(){

//alert(1);

$("#addUserWin").modal('show');

}

</script>

</head>

<body>

</ol>

</div>

</div>

<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 男

</label>

<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 女

</label>

</div>

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserWin">添加新用户</button>

</form>

</div>

<tr><td>1</td><td>阿三</td><td>18</td><td>男</td><td>120</td><td><span class="glyphicon glyphicon-search"></span><span οnclick="

alert(1);()" class="glyphicon glyphicon-pencil"></span><span class="glyphicon glyphicon-remove"></span></td></tr>

</table>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

</div>

<h4 class="modal-title" id="myModalLabel">添加新用户</h4>

</div>

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</div>

</form>

</div>

</div>

</body>

</html>

小靖砸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

1 、了解各种UI框架[1]Bootstrap （Web框架）编辑 http://www.bootcss.com/Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 [1] Bootstrap提供了优雅的HTML和C...
复制链接

扫一扫