-
Bootstrap每天必学之简单入门
所属栏目：[安全] 日期：2020-12-18 热度：191
在上一篇文章中主要是简单的介绍了一下Bootstrap，这篇文章进一步了解相关内容，为之后的学习打下基[详细]
-
Bootstrap每天必学之基础排版
所属栏目：[安全] 日期：2020-12-18 热度：122
本次主要来了解的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。主要内容如下： 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表 一、标题 Html中的所有标题标签，从 到[详细]
-
Bootstrap每天必学之栅格系统（布局）
所属栏目：[安全] 日期：2020-12-18 热度：189
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页[详细]
-
Bootstrap每天必学之下拉菜单
所属栏目：[安全] 日期：2020-12-18 热度：64
一、下拉菜单（基本用法） 小伙伴们注意，在Bootstrap框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件： LESS版本：对应的源码文件为 dropdowns.less Sass版本：对应的源码文件为 _dropdowns.sass 编译后的Bootstrap版本：查看bootstra[详细]
-
Bootstrap每天必学之按钮
所属栏目：[安全] 日期：2020-12-18 热度：122
1、按钮（按钮组） 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。那么在这一节中，我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件。 源码查询： 按钮组[详细]
-
Bootstrap每天必学之导航
所属栏目：[安全] 日期：2020-12-18 热度：119
1、导航（基础样式） 导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一，可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪，五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。[详细]
-
Bootstrap每天必学之导航条
所属栏目：[安全] 日期：2020-12-18 热度：69
1、导航条 导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色（显示更突出）、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导[详细]
-
Bootstrap每天必学之标签与徽章
所属栏目：[安全] 日期：2020-12-18 热度：82
1、标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示： 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，[详细]
-
Bootstrap精简教程
所属栏目：[安全] 日期：2020-12-18 热度：155
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web开发更加快捷。[1]它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范[详细]
-
详解基于Bootstrap扁平化的后台框架Ace
所属栏目：[安全] 日期：2020-12-18 热度：171
最近一段时间在做一个管理系统，在网上找了很久的前端展示框架，终于找到一款基于Bootstrap的后台管理系统模版：Ace。Bootstrap是Twitter 于2010年开发出来的前端框架，用过的同学应该知道，这款前端框架不仅界面很美观，而且兼容了很多的浏览器，大大加速了[详细]
-
Bootstrap每天必学之缩略图与警示窗
所属栏目：[安全] 日期：2020-12-18 热度：152
1、缩略图 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更[详细]
-
Bootstrap每天必学之进度条
所属栏目：[安全] 日期：2020-12-18 热度：137
1、进度条 在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果： 进度条和其他独立组件一样，开发者可以根据自己的需要，选择对应的版本： LESS版本： 源码文件progress-bars.less[详细]
-
Bootstrap每天必学之媒体对象
所属栏目：[安全] 日期：2020-12-18 热度：113
在Web页面或者说移动页面制作中，常常看到这样的效果，左边居左（或居右），内容居右（或居左）排列，如下图所示： 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式，可以用来构建不同类型的组件。这些组件都具有开篇所说的样式风格。那么在Boo[详细]
-
Bootstrap每天必学之面板
所属栏目：[安全] 日期：2020-12-18 热度：77
1、面板 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： Less版本： 对应的源码文件是 panels.less Sass版本： 对应的源码文件是 _panels.scss 编译后的Bootstrap：[详细]
-
Bootstrap每天必学之js插件
所属栏目：[安全] 日期：2020-12-18 热度：77
1、Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 B[详细]
-
全面解析Bootstrap排版使用方法（标题）
所属栏目：[安全] 日期：2020-12-18 热度：201
Bootstrap和普通的HTML页面一样，定义标题都是使用标签 到 ,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： Bootstrap标题一 Bootstrap标题二 Bootstrap标题三 Bootstrap标题四 Bootstrap标题五 B[详细]
-
全面解析Bootstrap排版使用方法（文字样式）
所属栏目：[安全] 日期：2020-12-18 热度：144
一、段落 段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）： 1、全局文本字号为14px(font-size)。 2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是[详细]
-
全面解析Bootstrap弹窗的实现方法
所属栏目：[安全] 日期：2020-12-18 热度：160
一. 结构分析 Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮[详细]
-
全面解析Bootstrap图片轮播效果
所属栏目：[安全] 日期：2020-12-18 热度：97
一 . 结构分析 一个轮播图片主要包括三个部分： 轮播的图片 轮播图片的计数器 轮播图片的控制器 第一步： 设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 代码如下: 第二步[详细]
-
全面解析Bootstrap手风琴效果
所属栏目：[安全] 日期：2020-12-18 热度：80
触发手风琴可以通过自定义的data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。 第一步，设计一个面板组合，里面有三个折叠区： 第二步：给面板添加内容 ，每个面板包括两个部分，第一个是面板标题 panel-heading，[详细]
-
JS组件Bootstrap实现弹出框和提示框效果代码
所属栏目：[安全] 日期：2020-12-18 热度：196
前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作用，如果你的系统有一个友好的弹出提示框，自然能给用户很[详细]
-
JS组件Bootstrap Table表格行拖拽效果实现代码
所属栏目：[安全] 日期：2020-12-18 热度：65
一、业务需求及实现效果 项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右边Table里[详细]
-
JS组件Bootstrap Table表格多行拖拽效果实现代码
所属栏目：[安全] 日期：2020-12-18 热度：141
前言：前天刚写了篇，今天接到新的需要，需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。用了半天时间研究了下，效果是出来了，但是感觉不尽如人意。先把它分享出来，以后想到更好的办法再优化吧。 一、效果展示 1、拖动前 2、拖动中 3、拖动后 4、撤[详细]
-
JS表格组件神器bootstrap table详解（基础版）
所属栏目：[安全] 日期：2020-12-18 热度：155
一、Bootstrap Table的引入 关于Bootstrap Table的引入，一般来说还是两种方法： 1、直接下载源码，添加到项目里面来。由于是Bootstrap的一个组件，所以它是依赖Bootstrap的，我们首先需要添加Bootstrap的引用。 2、使用我们神奇的Nuget打开Nuget，搜索这两[详细]
-
完美实现bootstrap分页查询
所属栏目：[安全] 日期：2020-12-18 热度：194
最近，开始我们的Java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。其实并不难，只要我们明白分页的实质就行。说了这么多，就[详细]
