twitter-bootstrap 相关问题

我想加载一个 JSON 文件，该文件在 Bootstrap Modal 内创建一个列表。我将其设置为如果您单击某人的图片，则会弹出模式。 ... 我想加载一个 JSON 文件，该文件在 Bootstrap Modal 内创建一个列表。我已经设置了，如果您单击某个人的图片，就会弹出模式。 <li class="project span3" data-type="pfa"> <a data-toggle="modal" data-target="#myModal" class="thumbnail"> <img src="img/anon.jpg" alt="Kenneth Atkins" /> <h1>Kenneth Atkins</h1> <p>[Description here]</p> </a> </li> 这是 JSON 数据的示例： var florida_exoneration = [ { "last_name":"Atkins", "first_name":"Kenneth", "age":16, "race":"Caucasian", "state":"FL", "crime":"Sexual Assault", "sentence":"10 years", "conviction":2004, "exonerated":2008, "dna":"", "mistaken witness identification":"", "false confession":"", "perjury/false accusation":"Y", "false evidence":"", "official misconduct":"", "inadequate legal defense":"", "compensation":"" } ] 我希望模态在框中显示类似这样的内容： Title = "first_name + last_name" Age = "age" Race = "race" State = "state" "" "" 我还想确保数据与图片相关联，这样模态就不会混淆。如果这有点令人困惑，我很抱歉。如果有人有任何疑问，我会尽力澄清。方法一：使用Ajax 每次用户单击图像时，您都会从单击的图像中获取 id，然后向服务器发送 Ajax 请求以获取 JSON 对象。 HTML <ul> <li class="project span3" data-type="pfa"> <a href="#" data-id="2" class="thumbnail"> <img src="img/anon.jpg" alt="Kenneth Atkins" /> <h1>Kenneth Atkins</h1> <p>[Description here]</p> </a> </li> </ul> JavaScript (function($) { var infoModal = $('#myModal'); $('.thumbnail').on('click', function(){ $.ajax({ type: "GET", url: 'getJson.php?id='+$(this).data('id'), dataType: 'json', success: function(data){ htmlData = '<ul><li>title: '+data.first_name+'</li><li>age: '+data.age+'</li></ul>'; infoModal.find('.modal-body').html(htmlData); infoModal.modal('show'); } }); return false; }); })(jQuery); 方法二：使用隐藏div 不需要任何Ajax请求，但你需要创建一个隐藏的div，其中包含你想要在模态中显示的所有信息 HTML <ul> <li class="project span3" data-type="pfa"> <a href="#" class="thumbnail"> <img src="img/anon.jpg" alt="Kenneth Atkins" /> <h1>Kenneth Atkins</h1> <p>[Description here]</p> <div class="profile hide"> <ul> <li>title: Atkins Kenneth</li> <li>Age: 16</li> </ul> </div> </a> </li> </ul> JavaScript (function($) { var infoModal = $('#myModal'); $('.thumbnail').on('click', function(){ htmlData = $(this).find('.profile').html(); infoModal.find('.modal-body').html(htmlData); infoModal.modal('show'); return false; }); })(jQuery); 我遇到了这个问题，这是因为我没有所需的“数据”包装器。将您的 JSON 包裹在其中： { "data": [ {your app data here},...{} ]} 一旦我这样做了，问题就解决了。

javascript jquery json twitter-bootstrap

回答 2 投票 0

如何使用 SASS 变量覆盖 Bootstrap 5 Navbar 字体系列？

我正在 webpack 处理的 sass 项目中使用 Bootstrap 5，我想使用 SASS 变量自定义导航栏的字体系列。我尝试了各种方法，但似乎无法理解

css twitter-bootstrap webpack sass bootstrap-sass

回答 1 投票 0

带有可滚动 tbody 的 Bootstrap 响应式表格？

我有一个引导表，我在它的tbody中附加了数据库的内容，但我无法真正仅在tbody中获得响应式垂直滚动（带有固定标题），我试图用css和.. .

css twitter-bootstrap bootstrap-5 bootstrap-table

回答 2 投票 0

移动导航栏问题

编辑＃1：在我将高度定义为 89px 后，我的移动菜单似乎位于我的内容后面。我的移动版导航栏出现问题。导航栏没有徽标那么高，所以...

html css twitter-bootstrap

回答 2 投票 0

从剪贴板粘贴到使用“form-control rte”类（富文本编辑器）的文本区域中

我正在从 WebView2 运行一个脚本来完成在线表单 - 非常适合使用...的标准文本区域 document.getElementById('fname').value = 'SomeName'; 但不能与引导一起使用...

javascript twitter-bootstrap webview2

回答 1 投票 0

Bootstrap 5 - justifty-content-end 不起作用

我正在尝试使用 bootstrap 5 创建一个标题。在标题中，我有一个导航栏，其中包含我想浮动到右侧的链接。在查看引导程序网站后，我注意到他们的广告......

html css twitter-bootstrap bootstrap-5

回答 4 投票 0

bootstrap popover：使用ajax重新加载内容

我在使用ajax 重新加载引导程序弹出窗口的内容时遇到问题。这是一些代码：http://pastie.org/3960102 第二个ajax请求（当我点击“a.close”时）返回更新的内容（我...

jquery ajax twitter-bootstrap popover

回答 6 投票 0

更改按钮的宽度会在其他按钮之间创建空间

我正在使用按钮标签制作一个计算器，我只想更改 id=equal 的一个按钮的宽度，但是当我更改它的宽度时，每行的第三个和第四个按钮之间会添加空格...

html css twitter-bootstrap button

回答 1 投票 0

Angular bootstrap 4 使用搜索过滤器进行选择

我有一个 Angular 项目，我正在使用 Bootstrap 4。我有一个选择：一个两个我有一个 Angular 项目，我正在使用 Bootstrap 4。我有一个选择： <select> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> 当选择打开时，我需要一些搜索过滤器或类似的过滤器。我该怎么做？您必须使用下拉选择器创建自定义输入。例如： <div> <input type="text" (keyup)="onSeachDropdownValue($event)"/> <div class="dropdown-selector"> <div class="dropdown-selector-option" *ngFor="let option of searchedOptions" (click)="onSelectDropdownValue(option)">{{option}}</div> </div> </div> 在你的打字稿中： options = ['option1', 'option2', 'option3']; searchedOptions = []; onSeachDropdownValue($event) { const value = $event.target.value; searchedOptions = options.filter(option => option.includes(value)); } onSelectDropdownValue(option) { // Do something with selected value } 您可以使用两种方式绑定，以您想要的方法（模板或反应方法）填充所选选项的输入。希望有帮助检查此解决方案，如果未显示下拉数据，则检查此解决方法。这是我根据 Angular 16 和 Bootstrap 5 中提到的两个解决方案所做的。安装NgMultiSelectDropDownModule并正确导入，在.html中： <ng-multiselect-dropdown [placeholder]="'Employee privilege'" [settings]="dropdownSettings" [data]="dropdownList" [(ngModel)]="selectedItems" > </ng-multiselect-dropdown> 在.ts中： import { FormsModule} from '@angular/forms'; . . . dropdownList = [{}]; selectedItems = [{}]; dropdownSettings = {}; ngOnInit(): void { this.dropdownList = [ { id: 1, text: 'Barbecue' }, { id: 2, text: 'Mustard' }, { id: 3, text: 'Ketchup' }, { id: 4, text: 'Mayonaise' } ]; this.selectedItems = [ { id: 1, text: 'Barbecue' }, { id: 2, text: 'Mustard' } ]; this.dropdownSettings = { idField: 'id', textField: 'text', selectAllText: 'Select All', unSelectAllText: 'UnSelect All', itemsShowLimit: 3, allowSearchFilter: true, limitSelection: 2 }; }

angular twitter-bootstrap bootstrap-4

回答 0 投票 0

悬停时禁用 boostrap 子菜单

我有一个使用 Boostrap 3 的导航菜单，但我不知道如何禁用子菜单的“悬停时”功能。我希望子菜单仅在单击时打开。 https://jsfiddle.net/elalgarro/q1vd...

jquery twitter-bootstrap navbar

回答 1 投票 0

样式化的复选框标签在选中时移动

我正在尝试为我正在从事的项目设计一些更大的引导元素，但我似乎遇到了一个问题。当我处理复选框时，我会按照我需要的方式设置它的样式，但是...

html css twitter-bootstrap

回答 1 投票 0

offcanvas 按钮问题也不起作用

我使用了offcanvas上一个引导程序版本，它有关闭按钮（没有它，offcanvas无法关闭）：当我单击“添加到购物车”按钮时，offcanvas可以工作，但是。按钮 &qu...

html css twitter-bootstrap button bootstrap-5

回答 1 投票 0

清除浏览器缓存后无法使用 dash-bootstrap 加载外部样式表

我正在为我的导航栏使用 dash-bootstrap-components 和外部样式表。我的代码中的第三行实际上是 app = dash.Dash(__name__,use_pages=True,external_stylesheets=[dbc.themes.CERULEAN,...

python twitter-bootstrap plotly-dash

回答 1 投票 0

CSS 样式未出现在特定类中

我的 css/main.css 文件正确链接到我的 index.html 文件，并且里面的所有 CSS 代码都适用于我的所有 HTML 元素。但是，我正在尝试获取一个在悬停时显示信息的图像...

html css twitter-bootstrap

回答 3 投票 0

无边框引导表格

尝试显示无边框的引导表。当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框尝试显示无边框的引导表。当我删除（bootstrap.min.css）时，我可以隐藏边框，但是当添加它时，无法隐藏边框 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <div class="container"> <form action="" method="POST"> <div class="mb-3" style="width:100%;"> <input class=" form-control fromDT" style="width:100%;" type="date" name="fromDT" style="" id="fromDT" value="22-2-2022" /> <input class=" form-control toDT" type="date" name="toDT" style="" id="toDT" value="11-1-2000" /> <input type="submit" id="btn-save" class="btn btn-danger form-control btn-save" style="" value="Submit" name="SEARCH"> </div> </form> <br><br><br> <div class="table-responsive"> <table class="table table-borderless" border="0" cellspacing="0" cellpadding="0"> <tr> <th class="not_mapped_style" style="line-height:0; text-align:center">ID</th> <th class="not_mapped_style" style="line-height:0; text-align:center">date</th> <th class="not_mapped_style" style="line-height:0; text-align:center">ref </th> <th class="not_mapped_style" style="line-height:0; text-align:center">amount</th> <th class="not_mapped_style" style="line-height:0; text-align:center">income</th> <th class="not_mapped_style" style="line-height:0; text-align:center">Balance</th> </tr> <tr> <td style="line-height:0; text-align:center"><b>433</b></td> <td style="line-height:0; text-align:center">22-2-2022</td> <td style="line-height:0; text-align:center">44332</td> <td style="line-height:0; text-align:center">443</td> <td style="line-height:0; text-align:center">1111</td> <td style="line-height:0; text-align:center">899989</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> <tr> <td style="line-height:0; text-align:center">100</td> <td style="line-height:0; text-align:center">22-2-2024</td> <td style="line-height:0; text-align:center">4333</td> <td style="line-height:0; text-align:center">400$</td> <td style="line-height:0; text-align:center">0</td> <td style="line-height:0; text-align:center">1600$</td> </tr> </div> 解决了... 我使用了这个CSS代码 <style> .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { padding: 8px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid rgba(221, 221, 221, 0)!important; } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid rgba(221, 221, 221, 0)!important; } </style>

html css twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

twitter-bootstrap 相关问题

最新问题