文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

将 BootStrap 引入项目中使用有两种方式： 直接使用网上资源 将相关资源下载至本地使用 使用网上资源 第一种方式最简单，直接在 HTML 文档中声明 css 和 js 文件来源即可，如： 动到官网下载，下面三个地址： 下载 BootStrap 下载 jQuery 下载 popper 二是利用一些工具来下载，如 node.js 的 npm 命令来下载，打开终端...属性，通过 id 来控制指定区域的折叠和展开。...那么，展开之后的区域里的列表控件上，出现了一些例如：row，col-sm-8 之类的 class，这些又是什么意思呢？...所以 col-sm-8 表示当显示区域 >= 576px 时，该控件占据 8 列，所以，同一个控件里会出现诸如：col-sm-8 col-md-7 其实就是响应式布局处理，在不同显示区域大小时，呈现不同的大小

5K20

未来布局之星——ConstraintLayout

界面中央有两块区域，左边是预览界面，右边的蓝色区域是控件拖动操作界面。 ?...将布局修改为ConstraintLayout 删除一个控件 完成转换后，可以在Component Tree下方看到ConstraintLayout里面有原来存在的TextView控件，如果不需要，可以在蓝色区域选中...Button控件约束 如将按钮下边圆圈拖至ConstraintLayout底部，则按钮移动至底部；再将按钮上边圆圈拖动至ConstraintLayout顶部，垂直方向上有两个约束的按钮控件就会实现垂直居中...删除约束有三种方式： 删除单个约束 将鼠标移动到要删除的约束对应的小圆圈，待小圆圈出现闪烁的红色圈圈时，点击小圆圈即可删除约束。 ?...如下图所示，单击打开工具栏中Autoconnect功能按钮，将控件拖至屏幕中心，然后约束就会自动添加了，这个相信使用过墨刀设计过APP原型的读者们会感到很熟悉。 ?

3.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    PyQt十讲 | Qt Designer工具的使用方法

    主界面的不同区域介绍： 控件工具箱：提供Gui界面开发各种基本控件，如单选框、文本框等。可以拖动到新创建的主程序界面。 ? 主界面区域： 用户放置各种从工具箱拖过来的各种控件。...对象查看器区域： 查看主窗口放置的对象列表。 ? 属性编辑器区域： 提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。 ?...信号/槽编辑器区域： 编辑控件的信号和槽函数，也可以添加自定义的信号和槽函数。 ? ? 基本控件介绍 工具箱区域是按照控件作用类别进行划分的。...如下所示即为上述几种工具箱基本控件的对比图。 ? ? 工具小实战了解基本控件及其作用和获取输入/显示方法后，就可以开始动手实现用户小需求了。比如制作一个登录界面。获取用户名和密码并显示。...拖完后如下： ? 3 双击各个控件，修改控件名称（对应属性编辑区中的text，可直接双击控件修改）以及对象名称（对应属性编辑区中的objectName）。

    9.1K20

    不用Visual Studio，5分钟轻松实现一张报表

    Barcode：条形码是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。...第3分钟：报表设计需求 我们希望报表呈现的结果是类似下面的布局，报表头、报表数据详情、报表尾，即整体风格和RDLC报表类似 同时，还可呈现二维码、图片展现格式、报表生成时间、报表页面等信息。...自动对齐线（Snap Lines）：在报表设计界面上拖动某个控件，当该控件与其它控件（或者报表某个区域的边界）对齐时，被拖动控件和与之对齐的控件（或者报表某个区域的边界）之间将出现自动对齐线，让用户自由地布局控件变得更加容易...报表控件对话框（Report Control Dialogs）：提供简便的方法来设置报表控件的相关属性。 区域报表布局默认情况下显示三个区域： 页眉、明细和页脚。...您可以添加或删除页眉和页脚，报表头和报表尾，还可以添加 32 级的分组页眉和页脚（在报表上单击右键并选择插入，可以插入报表头/报表尾和分组头/分组尾。）。将控件拖这些区域中，以此来显示报表数据。

    5.2K50

    适合传统OFFICE开发者的网页开发知识-进阶篇

    例如，电子表格的插件开发，我们数据的输入界面和最终数据输出，都可以用工作表单元格区域来交互和呈现，比起将数据渲染在网页上，更简单、用户交互体验更好（可以用到电子表格的各种字体、样式、边框、函数公式、条件格式...所以，最终其实我们用到的网页知识，仅仅用于和用户作界面交互时才用到。而界面交互，就如我们传统的窗体开发那样，仅需存放一些表单控件即可。...笔者在开发EasyShu图表插件过程中，也大量使用到，例如对图表的长宽、背景颜色等样式处理和对图表多指标切换时网页上的指标选择清单进行运行时生成。这些都用到了JQuery来操作。...上述也陈述到我们最大的需求是生成网页UI控件，将其绑定一些事件与用户交互，而原生的网页控件是比较丑陋的，和VBA里的窗体水平相当，日常看习惯了那些前端人员做的各种好看界面，给自己一点动力去提升，也是有必要的...笔者现在了解到的信息，Bootstrap是一个用于美化控件UI和布局的轮子，没有前面三大框架那么重，可能是个不错的选择。当然JQuery也有其自己的UI控件库和很多的扩展，不妨也可以用它。

    84920

    解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件，一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。...2.解决办法 通过Google搜索，发现select2作者在github上说明了这个问题： 但是他给出解决的方法，我看不太懂，后面也有人说直接修改jQuery UI类库，但是我们项目中使用的jquery-ui...所以不可能修改jQuery UI的源代码，而已修改源代码，在后期类库升级和维护上，各种坑还是比较多。所以我继续搜索解决版本。在jQuery UI的官网找到了方法。...hot fix代码如下： hot fix:Select2控件在jQuery UI弹出对话中不能搜索 $.widget("ui.dialog", $.ui.dialog, { open:..._super(event); } }); 3.心得体会 在前端开发中，虽然很多时候为了快速迭代和项目及时上线，我们会使用很多成熟的第三控件或者插件，我们在借助官网api之后，在项目正确的集成它之后

    2.5K100

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    ，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等...先来说说上面用到的这些文件的用途和简单介绍： jQuery：这个插件的必备库，你懂。 jQuery UI：扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。...鼠标滚动设置成像素值 填写false取消鼠标滚动功能 mouseWheelPixels:Integer：鼠标滚动中滚动的像素数目 值为以像素为单位的数值 autoDraggerLength:Boolean：根据内容区域自动调整滚动条拖块的长度...).mCustomScrollbar("scrollTo","first");：滚动到内容区域中的第一个对象位置 $(selector).mCustomScrollbar("scrollTo","last...");：滚动到内容区域中的最后一个对象位置 $(selector).mCustomScrollbar("scrollTo",Integer);：滚动到某个位置（像素单位） scrollTo 方法还有两个额外的选项参数

    17.9K30

    .NET MAUI 模仿网易云音乐黑胶唱片的交互实现

    他将留声机唱盘区域包裹起来。这样当手指在唱盘区域滑动时，就可以触发平移手势事件。...TranslationX属性将绑定到拖拽物的TranslationX属性上，初步效果如下 拖拽区域需要两个影子控件，分别显示上一曲和下一曲的专辑封面。...若在手指离开时，唱盘的中心点还在MiddlePit区域范围内，则将唱盘回弹移动到MiddlePit中心点。...若在LeftPit或RightPit区域，则将唱盘移动到LeftPit或RightPit区域中心点。...当命中LeftPit或RightPit区域时，我们希望影子控件移动到MiddlePit中心点。当影子控件移动到位时，替换掉当前的唱盘，成为新的拖拽物。由此可以无限的拨动唱盘实现连续切歌的效果。

    1.2K40

    【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

    IBAction 返回值方法 与 界面控件, 默认绑定 Touch Up Inside 事件; ② 右键选择按钮从 Send Events 列表中的按钮事件向代码拖线, 可以选择 将 按钮的指定事件....上拉扩展 对象库 面板 大小 : 将 鼠标移动到 对象库 面板的上边缘, 可以 扩大 对象库 面板框 大小; ---- ( 2 ) iOS 常用 控件 iOS 常用控件 : 1.UILabel :...进行连线; 2.关联属性与界面控件 : 建立 TextField 控件与 number1TextField 属性的连线, 过程与上面建立 按钮 与 点击 方法 关联的过程相同, ① 将鼠标移动到 ViewController.h...; ① 属性左侧的圆圈图示 : 第一张是鼠标没有移动到圆圈上, 第二章是鼠标移动到了圆圈上; ② 建立关联图示 : 打开辅助编辑器, 按住鼠标左键, 拖到 storyboard 中对应的控件上...; 2.拖线 将 白色的 UIView 传入 UIViewController.m 中 : 按住 control 不放, 左键拖动 白色的 UIView 控件, 拖动到 ViewController.m

    7.1K30

    jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中，日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker，日历控件能满足大多数场景开发需要。...本文就主要讨论jQuery UI Datepicker的使用，和中文本地化配置。 1.jQuery UI介绍 jQuery UI是一套基于jQuery控件和动画效果Javascript类库。...最新版本1.10.4.基于jQuery 1.6+ jQuery UI官方网站 2.jQuery UI Datepicker介绍 Datapicker是jQuery UI里面控件的一个控件。...主要是给用户呈现日历，方便用户选择日期和时间。 Datepicker介绍 3.jQuery UI Datepciker示例 步骤1.下载最新版jQuery UI....在使用datepicker之前，使用下面代码，将datepicker的语言设置为中文就好了。

    3.4K50

    【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

    本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。...a { cursor: pointer; }：将链接的鼠标指针样式设置为手型。 #top、#middle、#foot：分别设置顶部、中间和底部区域的宽度、高度、居中显示和背景图片。...document.documentElement.scrollTop = scrollTopVal;：将页面滚动到指定的高度。 四、工作流程▶️ 1....页面加载： 浏览器解析 HTML 文件，加载 CSS 文件和 JavaScript 文件。 页面显示顶部、中间和底部区域，以及右侧的侧边栏。 2....toFunction 函数将页面滚动到指定的高度。 3. 页面滚动： 当用户滚动页面时，触发 $(window).scroll 事件。

    2.2K00

    列举一下项目中使用的产品和技术

    官网 http://docs.structuremap.net/ jQuery,jQuery UI和jQuery Tools 因为项目中大多数成员都会使用jQuery，所以前端的交互，验证，Ajax，CSS...同时在项目中需要使用的几个效果和交互可以使用jQuery UI Dilog， jQuery Tools里面的scrollable，tab等。...同时常见的功能可以封装成jQuery插件，以便后期的项目复用和维护。当然对jQuery的版本有一些限制，本次项目就有因为jQuery版本和jQuery UI版本之间的不兼容，出现了一下bug。...jQuery dataTable 项目中用到列表非常的多，在web forms时代基本都是用GridView等列表控件。...在MVC中，这些基本都不用或者不能用，所以对数据列表的呈现需要有一个好的插件进行支持。dataTable在分页，样式自定义和排序方面做的都不错。

    1.7K100

    一个案例入门tableau——NBA球队数据可视化实战解析

    其次是「行列」区域和「效果预览」区域。 在他们的顶部是快捷工具栏，这里有一些常用的功能按钮。...且胜场和负场用不同的颜色表示。如果直接将球队拖至列上，「胜」和「负」拖至行上，出来的胜负是两个轴，如下图所示。 ? 这样显然不能达到目标。应该想办法把两个指标放在一个轴上。...尝试将球队拖至列上，度量值拖至行上，如下图所示。 ? 发现所有的指标都被混在一个柱子里没有分开。首先我们将多余的指标剔除掉。操作方法为，将度量名称拖至筛选器，然后编辑筛选器，只勾选胜，负两个指标。...以我们前面创建的场次和胜率工作表为例，操作步骤为，首先在“最低胜率”参数上右键，选择显示参数控件。在工作表的右侧，图例下方会出现一个带有滑杆的参数框，我们滑动滑杆将初始的100%调整为0%。...然后将“胜率筛选”字段拖至筛选器，并勾选“真”。如果前面不更改为0%，这里的值只有“伪”，如果更改为50%，则会有“真”和“伪”。我们只关心为“真”的，即胜率不小于参数值的结果，因此勾选“真”。

    9.2K11

    你见过微信侧滑返回的联动效果，但开门效果、百叶窗效果见过吗？

    iOS的弹性留白效果： //当纵向不能滚动（或滚动到顶/底）时，若继续拖动，则UI呈现弹性留白效果，释放后平滑恢复 SmartSwipe.wrap(view) .addConsumer(new...或滚动到顶/底）时，若继续拖动，则UI呈现弹性拉伸效果，释放后平滑恢复 SmartSwipe.wrap(view) .addConsumer(new StretchConsumer())...ViewDragHelper的主要作用是：拦截父容器的touch事件，捕获一个子控件来进行拖拽，通过改变这个子控件的left和top来将其在父容器中重新定位，从而达到拖拽的效果。...SmartSwipe的封装思路如下： 用一个ViewGroup将需要处理侧滑事件的控件View包裹起来（被包裹起来的控件作为它的__contentView） 可以为这个ViewGroup添加一些附属控件...另外，Star一个开源项目是对它最好的鼓励和支持！

    2.2K10

    ActiveReports 区域报表中的事件介绍

    还可以使用此事件设置子报表控件一个新的子报表实例。一旦该事件处理完成，不要动态的向报表动态地添加项目。 DataInitialize 该事件在ReportStart事件之后触发。...或者在绑定报表中执行特殊功能，比如将两个字段结合或者执行计算。FetchData事件处理方法中不应当使用报表中的任何控件。...但是会确保在区域呈现到页面上之前。 Format事件是唯一一个您可以在其中改变区域高度的事件。使用该区域对象以改变其中任何控件的属性，或者区域对象本身。...BeforePrint 事件 ActiveReports在一个区域呈现到页面之前触发这个事件。 区域和其中的控件都已经完成了增长和收缩。因此，您可以在这个事件中获取区域和其中控件的准确高度。...一旦事件处理过程完毕，区域将无法改变，因为那时区域已经在这个事件发生之后立即呈现到Canvas上。 AfterPrint 事件 ActiveReports在一个区域呈现到页面后触发这个事件。

    2K70

    python测试开发django-191.Bootstrap3 轮播图（Carousel）

    -- 引入 js jquery必须先引入 --> jquery-3.2.1/jquery-3.2.1.js...或者，使用data-slide-to将原始幻灯片索引传递给 carousel data-slide-to=”2”，这会将幻灯片位置移动到以 开头的特定索引0。...该data-ride=”carousel”属性用于将轮播标记为在页面加载时开始动画。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。...对于数据属性，将选项名称附加到 中data-，如data-interval=””. 姓名 类型 默认 描述 间隔 数字 5000 自动循环项目之间的延迟时间。....carousel(‘pause’) 停止轮播在项目中循环。 .carousel(number) 将轮播循环到特定帧（基于 0，类似于数组）。 .carousel(‘prev’) 循环到上一个项目。

    5.8K10

    使用jQuery UI的draggable和droppable完成拖拽功能--介绍

    项目中主要使用到jQuery UI里面的draggable和droppable，因为很多老的浏览器都不值html5的drag api。...我自己也没有去查看zTree的源代码，所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。...江西财经大学和“东华理工大学”是或的一个关系，而他们整体和”南昌航空大学“又是”且“的关系，当然也可以是”排除“关系。这里将实际项目简化了。点击江西高校，可以将下面所有的节点折叠起来。...拖拽元素到右边，可以拖到一个单独的区域里面，也可以拖到一个已经存在节点的区域里面。就想上图中的关系。 点击确定需要把右边的树形结构数据保存下来。...第三部分--方案思路： 1.了解jQuery draggable和droppable方法和工作原理 2.递归思想 3.各个击破 4.熟练使用jQuery操作dom结构 第四部分--参考网址： 1.http

    3.3K50

    ConstraintLayout_1：可视化拖拽布局

    基本操作 下面我们来学习一些具体的操作吧，ConstraintLayout的基本用法很简单，比如我们想要向布局中添加一个按钮，那么只需要从左侧的Palette区域拖一个Button进去就可以了，如下图所示...那么下面我们就来给Button添加约束，每个控件的约束都分为垂直和水平两类，一共可以在四个方向上给控件添加约束，如下图所示。...image.png 上图中Button的上下左右各有一个圆圈，这圆圈就是用来添加约束的，我们可以将约束添加到ConstraintLayout，也可以将约束添加到另一个控件。...当你选中任意一个控件的时候，在右侧的Properties区域就会出现很多的属性选项，如下图所示。 image.png 在这里我们就可以设置当前控件的所有属性，如文本内容、颜色、点击事件等等。...7.gif 不过，虽然我们将横轴的值拖动到了100，但是Button并没有紧贴到布局的最右侧，这是为什么呢？

    2.3K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券