推荐最新

bootstrap，怎么在导航栏右边加个按钮?

怎么在导航栏右边加个按钮 Logo Link Link

浏览量386

使用bootstrap table时不能显示筛选列和分页每页显示的行数？

在学习bootstrap-table时遇到不能显示列筛选和分页每页显示行数，点击的时候完全没反应。有没有大神能帮忙解答一下？ "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984283737_vuwR.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984283737_vuwR.png) "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984246495_6kOt.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984246495_6kOt.png) @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Index.cshtml"; } var clients = []; $(function () { clients = clientsInit(); //1.初始化Table var oTable = new TableInit(); oTable.Init(); }) function btn_add() { $.modalOpen({ id: "Form", title: "新增用户", url: "/SystemManage/User/Form", width: "700px", height: "510px", callBack: function (iframeId) { top.frames[iframeId].submitForm(); } }); } function clientsInit() { var dataJson = { dataItems: [], organize: [], role: [], duty: [], user: [], authorizeMenu: [], authorizeButton: [] }; var init = function () { $.ajax({ url: "/ClientsData/GetClientsDataJson", type: "get", dataType: "json", async: false, success: function (data) { dataJson.dataItems = data.dataItems; dataJson.organize = data.organize; dataJson.role = data.role; dataJson.duty = data.duty; dataJson.authorizeMenu = eval(data.authorizeMenu); dataJson.authorizeButton = data.authorizeButton; } }); } init(); return dataJson; } var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#gridList').bootstrapTable({ url: '/SystemManage/User/GetGridJson', //请求后台的URL（*） method: 'get', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 25, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: $(window).height() - 40, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 //uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 queryParamsType : "undefined", columns: [{ checkbox: true }, { field: 'F_Id', title: '主键' }, { field: 'F_Account', title: '账户' }, { field: 'F_RealName', title: '姓名' }, { field: 'F_Gender', title: '性别', formatter: function (value, row, index) { if (value == '1') { return '男'; } else { return '女'; } } }, { field: 'F_MobilePhone', title: '手机', }, { field: 'F_OrganizeId', title: '公司', formatter: function (cellvalue, options, rowObject) { return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname; } }, { field: 'F_DepartmentId', title: '部门', formatter: function (cellvalue, options, rowObject) { return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname; } }, { field: 'F_DutyId', title: '岗位', formatter: function (cellvalue, options, rowObject) { return top.clients.duty[cellvalue] == null ? "" : top.clients.duty[cellvalue].fullname; } }, { field: 'F_CreatorTime', title: '创建时间', }, { field: 'F_EnabledMark', title: '允许登录', }, { field: 'F_Description', title: '备注', }, ] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 pagesize: params.pageSize, //页面大小 page: params.pageNumber, //页码 sord:params.sortOrder, sidx: 'F_DepartmentId asc,F_CreatorTime desc' //排序列 //departmentname: $("#txt_search_departmentname").val(), //statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; 新增

浏览量191

Yourselffff

在bootstrap中使用了`col-sm-4`这样的类名为什么没有用？

在bootstrap中使用了"col-sm-4"这样的类名为什么没有用？使用的是官网上提供的"模板" (https://link.segmentfault.com/?enc=PpwADyKiCCrSs7ggcuk2rw%3D%3D.X3aXfx6tlz80UF4pq8yUoFb9pl%2BjfUoF0Rh9T749GY4%2BkJFUCwM2BF2E3J5Zdxt2kw633pF5gAtTGTqzQPFpCg%3D%3D)搭建的环境猜测是没有导入某一个模块，然后我就查看了"col-sm-4"这样的类名是怎么定义和导入的。 // myProject/scss/style.css @import "bootstrap/scss/grid"; 可见，我们导入了栅格系统模块。 // myProject/node_modules/bootstrap/_grid.css @if $enable-grid-classes { @include make-grid-columns(); } * "$enable-grid-classes"定义在_variable.scss中，并且值为"true" * "make-grid-columns" mixin定义了".col-{}-{}"这样的类名。// myProject/node_modules/bootstrap/mixins/_grid.css@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { @each $breakpoint in map-keys($breakpoints) { $infix: breakpoint-infix($breakpoint, $breakpoints);@include media-breakpoint-up($breakpoint, $breakpoints) { // Provide basic `.col-{bp}` classes for equal-width flexbox columns .col#{$infix} { flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 } .row-cols#{$infix}-auto > * { @include make-col-auto(); } @if $grid-row-columns > 0 { @for $i from 1 through $grid-row-columns { .row-cols#{$infix}-#{$i} { @include row-cols($i); } } } .col#{$infix}-auto { @include make-col-auto(); } @if $columns > 0 { @for $i from 1 through $columns { .col#{$infix}-#{$i} { @include make-col($i, $columns); } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } } } } 在这里我们定义了形如".col#{$infix}"," .col#{$infix}-#{$i}"的类名。但是当我们使用这些类名的时候发现被没有任何的效果。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/5b61e16e2de315f6a904df5aa2acdce2.png)

浏览量184

无心插柳柳成萌

Bootstarp如何实现点击左右按钮，实现滑动分类效果？

各位大佬好，这种左右点击滑动的分类事如何实现的？如图： https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/6ebe1a4b4a6eebc921e9416b7808803b.png 我目前使用的bootstarp可以用轮播图这个功能实现吗，具体应该如何实现呢，类似这种效果有现成的库吗？

浏览量186

0offer糕手

有什么ui框架实现这样的输入框？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/7c42ff2c9c4daf776e21af13779a9d9f.png)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/52e5c09eea1c1fe1d3ea3b520e328d1f.png)"https://login.docker.com/u/login/" (https://link.segmentfault.com/?enc=3AOyTTWFByL9ue3IoLKVXw%3D%3D.dTBl4dvTtufpnCu201HZCfIt5kZIKvy9MXgarADnZNVE0WIA4opjFZdhQB0V2UAg)

浏览量151

Mia好纠结

vue3 入口文件 App.vue中如何设置 viewport？

vue3的项目打算全局加入 viewport，但发现入口文件App.vue中的template中只有如下几行。很迷惑直接放进去，但运行之后又可以了，是vue自动识别然后移动到了中吗？还是必须写在区域，但发现好像随便放都会自动挪到标签中。 # App.vue

浏览量158

sssssjkl

如何解决 React Bootstrap 模态框无法正确显示关闭动画的问题？

我按照 ChatGPT 的描述，在 React Bootstrap 模态框的基础上以 hook 的形式封装了一个消息框组件，代码如下： import React from "react"; import { useState, createContext, useRef } from "react"; import { Button, Modal } from "react-bootstrap"; function useMessageBox() { let [title, setTitle] = useState(''); let [message, setMessage] = useState(''); let [buttons, setButtons] = useState(null); let [showDialog, setShowDialog] = useState(false); let resolveRef = useRef(null); const handleResult = (result) => { console.log(result); resolveRef.current(result); setShowDialog(false); }; const MessageBox = () => { return ( {title} {message} {buttons} ); }; const show = (title, message, type) => { setTitle(title); setMessage(message); if (type === 'ok') { setButtons( handleResult('ok') }>确定 ); } else if (type === 'yesno') { setButtons( handleResult('confirm') }>取消 handleResult('cancel') }>确定 ) } setShowDialog(true); return new Promise((resolve, reject) => { resolveRef.current = resolve; }); }; return [MessageBox, show]; } export default useMessageBox; 调用： function App() { const [MessageBox, show] = useMessageBox(); return ( 123 show("标题", "123", "yesno")}>显示 show("标题", "456", "ok")}>显示2 ); } 目前的问题是关闭对话框的时候没有动画，这个怎么解决？ "CodeSandbox 链接" (https://link.segmentfault.com/?enc=A9s8AEJotqXdh58GIZ3imA%3D%3D.a5Q7VsOJuT11QU3%2FtAXT46G5M4w40sGQJemiKy4Ky4k9C%2FY8QxHT82ZS77ji7F9PHfdprz1n5LvfQyx3vbuniE27TYRfCzwTtFNBldxo8hnmsaibGn1aCNsatTEHRAqlTEk48Zmtra1NX9dhtM1Ym%2BBB2kGI5NiHFPa55nQNDSzD%2FueIQKkBl8gsbGyxvldLVjeOve7MjywLvgxB98CbCZGqfOkmG2Y9qB7NcqoGRdCzEY1kApVa2MM71NawySnw6bUUxR%2ByjPbFsgcezwgV8Nx6DYVxI%2Fz9pGgL7w6na3RIYkSILvj6bhH1qasckfXmK4eNKAgsamZwm%2BguMWhGEFMW5NYWVRZnx1kE5kqM%2FSIKpCmmBx49QUjjiKe3yucpT8sN6RFnGok3JCRofqL%2B4T4OTm4XWZ85LsoWuKBoS8uNE%2Bzef3s7TNCcmhk3bZj43pafPFWvhsr6uimdLQW5zMerYtVKhB%2BcUQCH9JHQ4JZMxib7%2BndiBWCIG3dtA3KJ6nzJ3ovatU2i7MfiPsAg%2FQ8Wb2GV%2FhR0CtwipZ4k76hZ4Q2w4BdItUoX4lqmZB1ktHygu4UPpYnYCR1jWmgk3Jm4tmOnRKaOkM8aBxi7xUR2z2vXOYOtxDE9zL15ntuWLsWlhKdGIMhfxwla0XlT5Qx07tZQyyIJhvr%2FNuGVG0xiOc5U2qWS8Tjq6NqsN5dijY%2F%2BDZWu9x9hcTzoYIVYFQa%2Blbq3z8MbYX9%2BDTBkmhk30A85E151TnNwH8RZVDeLfT0hMWaohE7Dso4XG8sFA1bChabJmaXqF%2BhsTSis763AsNkaNsPUv3RVvQPGfT6zFQlEZQ5V4rNtfVrEGHiEzH8K3Zr4%2Bcd1zkLkjMdXmbonqbw1jbmLtvQh5J%2Fqte8367PLtGeMADA9IT%2FXnLimj%2Fc2PuP9tXqFPLHR0gIIqUubPdCfXa2GLk6sMTK8p64ZbwK%2BsqimiMd3DqgiArPRvP%2BBmHfUHwefmO3FHNwZVmQl2u5GhdUOB%2FTLml%2BaH1JROk8EdhMw0E7kKZOBui%2FqLiwHB%2BvKPJFusdccbIAT8JTTiR4HO06tFnZJ7p0oAx9h43MRl1EG769L90Fjl6kRPZ5uCpM%2FhYQjzyEu1CvZ8tKbLKLwXxCWc37vBtfoCA0trb%2B0jgv85vwtQhghjsTHBVFWgv0%2FXw%2FIBLle35ynqFB%2BS8CyP2J%2BP7NPJu6xpQkJ8X0xkDboBEzWrn0t5E%2B%2BOHLYge0fAcjDrjVJx7dQJTTcniv%2F8AWY7jhw6M01NPpOm9%2FzeK5xtTSRiUtJTCyCivXBZVEjV7AexPdnd5iJe55oIyUgVoOiyfa9iSRLo3UfgMPue4rfFehKBxA%2FLxSns0F4K9v%2FO8v2o%2BXk%2BzjpR5Dm0W6%2B9waEYz2zXzUrbxFybNsRgOIPdJs7LGj83YZyviTO%2Bun7kTpSY0GCmp3qvoyhgiwmiCxNRNkrC4anDultA4ZRny2WtgAhmzd8qa9pYatefx9JS834aDYO6ScGUjIAGIbd9J66PPN%2FArieyftOVtab%2F6BrMxZPKqluoKhLVrns6qBN7UTiSkwc2FQNCcY7zhkeL91T4OWSS6zYqrfq3Bo8QFjhnjG96CvvtQOxx7F%2BneZW9H3n83Efax3xNAF2mwifvodTTs0YtEFQ4%2Fy%2B4ah5wirwdf9t6GNHRlzeazFyGWbhkysBmrfuHqTAI0aYbRXd1k27mc53WOr8yZ7gMrUgKU6OHBFmB4zLX8TToQvSLhFscoznnWgXprcAMG6L0OZW6tXpt%2F0DpG81pgsD1B8hm95AsT3LMEMXuIbVuxn87NQmHWXvBk5QwO%2Fc4oq0bKJ149usejb8MuBd%2BbcrkhTnZ84RTsgtWoZLjsgeqm9BW2I3Oj6TQqvdxyBAphmnD0Fgj7ElSyFnyC78VFJ2jssC%2F0FyNHJvNG7gH%2BzGl0kHXCfHC6lLAFvihhDGw6t1rABCuE0W8bz295zRSs43MSa00mY7EcNfltGITkRRNqNXCWyjar%2BYPwLByQdMUXGKUMFVnWwDiZJKn9G6jLdDfnkn2ZYzfsdsf2J26CJ5V6YqcEEtKaO62Tf%2FWSUC9jlkjG5OGwm8nKoAJcYDm7TpUorFbivRpjEGadLnrvH73Sd8JyyefCOgA2QUJapgcrOD4np0cK5MgVHC5t3aGu2obtCirdXdHGmTp3n6YVQP2xY64VcCVtj23mAbM9RP8QzEzHfULuGhaTvNnNg0zcAMKR32U%2Byq9l8IsBs76D1NqaJ7HhU8jpOhJ0YotClWJQqZ6pLy20LG1pOcaexrn%2BSNMUjmD%2Ff2a2vZTAUR5ap%2BtoucqBi0%2FKNRjOWg2pqgXxJn20q%2BLfAPhPU51lPAoj2TqPnKfcXst%2B80%2Fylbfkz2Ky9D9Bs5jKwcYjw1TIZbhE2Bl5ajfqddhyOl4MYfVxqoz8HyBIt9hU1v1rs01RRnyAgrPekf2T6irkp%2Fi%2BVA432a6XgBDqPQwsfPMQjCq2XDaW05QH4NktUZoEfp7fI1OYyCVo1gg2qWvJq5En99rrDyQhfDw7gZmr0EbyWOPR4ogv4cAEksi1P9cuDShlzovHPFm4pE%2F2ww%2BLa%2B6aVwIASE5heoSi8yfVLr8PfQXYwnOwfkz3Se2K2r8tqJXoSbHJ6RhXMfgZfcdNUhf%2BWIqc3h4oXWvNey9NEqZ%2B0rUSbOCW8BnWUDuPa4JtVpvTf0TBR2eukkXVobMSLeJzhGnrKpOUazcKAmMoW4eNUmEwv0DvpKQMf2mV3AA0vHDnN50PJQY%2FervVryeXPPxA3DF8CotZ%2FX9AnvfYRNCHI%2FMmykY%2FCVBlJWHHnZrPTRy60rq%2BbMuYbkKfLFCaUPxKCPh9F2Oe70l%2BtaGusKzAkRksfi2Kky43I6z1EkqCdRkH2Edm0VTdBwE0z7OPGIegiCiKMF8ekvq2JhKQ1eMj6tHAknp%2BMUHqMs%2BSiSr11Aes0ol3kTOmATBv6qaKlqJgcmqivxtcnhSCLSCqhQ92Bzs8HuCWdVlNfhhKzJbx4pvdZXc2xuDb0UQVa%2BtPDJuGm26d9MEG7jyfk0yJoWX6cThNEo8LsBlot0xxlbmPyn3smRBBNqp88ylHUi7fKzy2t4mF%2B9vZ%2BKYx%2F3pa1uwrRETKlUBxD4LYpekdDzu7Xd7cv7WDQGC7K3JTAkYhzAl5qawIpvKG4%2BGrsFdDY9U0rEvbFlX5IKfXZj3hjKtZbo75gRYits7ewrY47JOhRd9k8LJ7Z1IDjeB929FYXTECfWTPV912HiN1OyjTaIrXewj6G0y%2FFOjeGGgrG2VCaomlb975HNjBMuwK212WPGCQeDb0QEULq%2FaAn1zhc%2B1uty2lJnR%2FrzU6QAtmjay6mKYrI9o34oUeL9aTTO5ZFNA9IRn6HFHCs2Rn4bk7ejvjxW3esUist5TZ1y6cXwkET7FTeFvfJJU8dW3GUAxkCJD06mAl%2Bo2SVCH6oFiWESFB9YGDpqUSr0ShVM5FZCv1nS8Wggwy3bF74f0L%2But860HaIzL7HPib4eANQlTWFoj7mPGOSgDPfBOPSyFhTzn1oakbohcyMpyn8nbjHI2mqGg04g2CLHpXK%2BIvPq6nNa0NRjP%2B4ayLxpIPztvyc2IQ6eDZMlyudoHebD3EbzSrqY8OZuL6N523E6k3JQ69pJ%2Fi3Im45Ymm93PGEZQAPBxpKc1NUD1apRdQgA3kon8XZmoD7WMfTrgY4SJN22cs0I230%2FOEqec25JS5DOGc5Rmb15FtogpplD7ZX6YZ8BFrw3IfmT4KvrLEXn2zdglYHUTtcc9iokrKUdbjeZ7t0IiLvxi%2FCsdpSKZRpf%2Br6NOTnKjphak0KLrqVLsEXx%2FxuyHcVXyhRt2UKLHhp9paw7Rj3Mma6TBsQwi8FC1bTS3S2B8jsigbQIeAwIxBrhTJKQt%2FosBhUZAyjyo8ouFrNfXhf982EPBNbWp8eaA2xEFGRebZNrqpMq0YQVe6F2lYmeOKHtPr6muw6CpanmkKtObpu2swc46UPbKPwNgZJFiIkZDzz7LDmWm%2FxODfn6wOTPPjeXSelMmCG2ObGp7kggNL%2FK9nSTYvk%3D)

浏览量147

你没饰八

使用 Bootstrap 5 创建下拉菜单后无法收回？

使用 Bootstrap 5 创建下拉菜单后，点击可以展开，但是再次点击无法收回。这是我的代码： {% load static %} Title 1 Python 解释器 1.1 调用解释器 1.2 解释器的运行环境 2 Python 速览 2.1 Python 用作计算器 2.2 走向编程的第一步如何解决这个问题？

浏览量123

刘一抗二二

使用gulp inject还是iframe？

这是我写一个html页面，我现在想要让右边刷新，导航栏不刷新。或者是整体刷新。 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/2657fadf370a11d303b3e8ea71973f66.png) 导航栏的代码：我的首页我的信息银行公告最新提醒我的资产负债我的账户账户管理账户概览交易明细查询他行账户管理资金归集账户设置资金归集管理资金明细查询转账汇款行内转账注册账户互转跨行转账批量转账批量转账查询转账结果查询联行号查询缴费支付自助缴费缴费查询缴费设置缴学费缴学费查询彩票站点缴费体彩缴款体彩缴款记录查询个人贷款个人贷款个人贷款查询小微贷查询贷款试算个贷产品展示家园e贷申请进度查询贷款详情信用卡申办与激活卡片激活办卡进度账户管理综合查询资料修改密码修改信用卡挂失信用卡补发额度管理额度查询调额申请账单查询已出账单未出账单账单维护授权历史交易查询授权未入帐交易查询信用卡还款本行主动还款本行约定还款分期信贷账单分期消费分期现金分期预借现金转账历史查询分期查询支付管理网上支付设置银联无密闪付积分管理积分查询我的活动增值保障动账短信提醒设置消费提示用卡须知随用金服务透支转账随意金汇总查询随意金明细查询理财产品产品超市风险评估持有理财产品我的定投在途交易待兑付产品交易明细查询贵金属签约我的储蓄定期互转通知存款智能通知存款易得利我的易得利易得利签约/解约月月息月月息产品我的月月息特色储蓄大额存单大额存单产品我的大额存单我要转让我的抓让转让专区活期盈活期盈产品我的活期盈我的网银用户名设置网银操作日志短信签约查询快捷菜单设置收款人名册维护缴费提醒设置安全中心安全设置交易限额设置手机银行限额签约证书更新账户安全锁对应页面被注释包裹，然后替换上去的代码"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240926/2d414ac2c14a9752bc879819813d52fb.png) 脚本： 'use strict' var gulp = require('gulp'); var requireDir = require('require-dir'); gulp.paths = { dist: 'dist', }; var paths = gulp.paths; requireDir('gulp-tasks') gulp.task('default', gulp.series('serve')); 做的尝试：整体刷新：使用gulp inject的命令，我单独写了页头，导航栏，页脚的页面，每当我想要修改的时候，我就只修改单独的这些页面，然后执行gulp inject命令，然后gulp就会根据我页面中的特定注释包裹的地方替换掉对应的代码。确实可以，不过会多出很多代码，冗余代码很多。但是我不知道这样做是否对页面性能有影响？是否应该使用iframe标签？疑问就是：用iframe还是gulp？

浏览量130

001

现在前端bootstrap用的多吗？？？

现在前端用的最多的技术有哪些？谢谢

浏览量129