Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用
Bootstrap 3：当另一个下拉菜单打开时，悬停时打开下拉菜单
我有几个 Bootstrap 3（由于我无法控制的原因必须使用它）导航栏中的下拉菜单，我希望它们表现得像应用程序菜单。通常，下拉菜单会在单击时打开，...
我发现了一个奇怪的行为，我无法在 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-gr... 我发现了一个奇怪的行为，我无法在 <button> 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择文本：http://getbootstrap.com/components/#list-group-buttons 这是一些标准行为还是可以编辑？我需要选择按钮中的文本。 您可以做这个问题的相反操作： 创建以下 CSS3： .list-group-item{ -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } 并链接样式表。它适用于我的火狐浏览器。 编辑：将“全部”更改为“文本”，正如 Nenad Vracar 所说。现在它可以在 Chrome 和 Firefox 中运行 可以设置user-select: text button { -webkit-user-select: text; /* Chrome all / Safari all */ -moz-user-select: text; /* Firefox all */ -ms-user-select: text; /* IE 10+ */ user-select: text; } <div class="col-sm-4"> <div class="list-group"> <button type="button" class="list-group-item">Cras justo odio</button> <button type="button" class="list-group-item">Dapibus ac facilisis in</button> <button type="button" class="list-group-item">Morbi leo risus</button> <button type="button" class="list-group-item">Porta ac consectetur ac</button> <button type="button" class="list-group-item">Vestibulum at eros</button> </div> </div> 小提琴 以上答案均不适用于 Safari。如果该按钮仅用于显示，并且您同意它不再发送 onClick 事件，则可以使用 pointer-events: none 使其在 Safari 中正常工作。 button { -webkit-user-select: text; /* Chrome */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; /* IE 10+ */ user-select: text; pointer-events: none; /* Safari */ } 您可以像这样为按钮定义 css 属性 对于按钮类添加光标：指针属性。 您可以直接指定按钮或自定义 CSS 类 光标：指针
我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附有
我正在尝试使用 Javascript 添加 Bootstrap Table 表标签。表标签的参数之一是数据分页。这种添加方法由于 - 而失败。 我该如何解决...
如何隐藏默认的选择文件按钮？ 这是我的html： 如何隐藏默认的选择文件按钮？ 这是我的html： <div class="col-md-4"> <span class="btn btn-info "><i class="glyphicon glyphicon-plus"> </i> Browse <input type="file" style="position:relative;overflow:hidden" id="inPutArtistImage" name="ArtistImage" accept="image/png, image/jpeg" /> </span> </div> 该按钮的样式很好，带有引导按钮信息颜色和加号图标。 我根本无法摆脱灰色的“选择文件”按钮。 如有任何帮助，我们将不胜感激。 我已经尝试了 StackOverflow 上的所有解决方案 2021 年更新 你可以使用 ::-webkit-file-upload-button { display: none; } 我找到了另一个即使在非 WebKit 浏览器中也能工作的解决方案 ::file-selector-button { display: none; } 它隐藏了“选择文件”按钮，但文件名仍然可见。 如果您还想隐藏文件名，只需使用 input 定位整个 display:none 简单。给input足够的padding-top，让它隐藏起来。 不要忘记做box-sizing的事情!! input#file { display: inline-block; width: 100%; padding: 120px 0 0 0; height: 100px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698394-icon-130-cloud-upload-512.png') center center no-repeat #e4e4e4; border-radius: 20px; background-size: 60px 60px; } <form> <input id="file" type="file" /> </form> 这可能是您正在寻找的东西 小提琴 我在这里所做的是使用 display: none 样式隐藏原始输入，并在另一个 div 上使用 jQuery click() 来模拟输入上的点击。 注意： 我使用 split('\\') 来转义 \，因为它用在从文件选择器返回的 fakepath 中。 通过 Stackoverflow 和其他教程寻找几个答案，我最终做了这段代码： $('#selectedFile').change(function () { var a = $('#selectedFile').val().toString().split('\\'); $('#fakeInput').val(a[a.length -1]); }); input#fakeInput { width: 100%; background-color: #f8f8f8; border-radius: 8px; display:block; padding: 11px 0; box-sizing: border-box; border:initial; height: 3em; } #buttonImage { float: right; position: absolute; right: 0; top: 0; background: #02a39c; padding:10px; color: white; font-weight: bold; border-radius: 0px 8px 8px 0px; height:1.25em; } #fakeDiv { width: 500px; position: relative; display: inline-block; } #selectedFile { opacity:0; position:absolute; left: 0; top: 0; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="fakeDiv"> <input type="file" id="selectedFile" /> <input type="text" id="fakeInput" /> <span onclick="document.getElementById('selectedFile').click();" id="buttonImage" >Browse</span> </div> 基本上，你必须以一种棘手的方式来做。 创建一个input type="file"，使其不可见（带有opacity或visibility属性，如果设置display=none，则不起作用）。 输入常规内容并根据需要设置格式 放置一个假按钮（在我的例子中是一个跨度） 单击按钮以启动 input type="file" 单击 只需用您通过不可见的输入文件上传的内容填写常规输入即可 注意：如果代码片段不起作用（我第一次发布代码片段），请尝试this JsFiddle。 在寻找一个简单的 CSS 解决方案时发现了这个。只需在链接的 css 文件中使用以下代码即可： input[type=file]::file-selector-button { visibility: hidden; } 归功于 Nikita Hlopov，https://nikitahl.com/custom-styled-input-type-file 在你的CSS中： input[type="file"] { display: none !important; !important 不是必需的。
尝试显示无边框的引导表。 当我删除（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>
我想开发仅适用于移动屏幕尺寸的内联网Web应用程序，我不需要响应式设计技术。 我想在右上角有一个切换按钮，按下它时...
我已将 html body 标记高度设置为 100%，但在 Firefox 中显示的像素比屏幕多一些，因此会出现导航滚动条。除了指定任意值之外，我该如何调整？
bootstrap 3 datepicker禁用像预订表格这样的分钟
我想在预订表格中使用 bootstrap 3 日期选择器。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 ... 我想在预订表格中使用bootstrap 3 datepicker。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> 我只想禁用 11/22/2013 00:53 而不是全天 11/22/2013。 我还看到了这个示例，它禁用了 00 分钟，但如果您选择 16:00，则无法将其更改为 16:15。 有人可以帮助我吗？ 我不完全明白你需要什么。根据我得到的信息，你想改变分钟，但以步骤（5,10,15）为单位。为此，您可以使用您传递的链接的类似方法，但无需禁用步骤选择器。 $('.datetimepicker').datetimepicker({ format: 'DD/MM/YY - HH:mm' }).on('dp.show', function () { $('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true); }); 笔 但是如果您不想显示分钟，只显示小时，您可以简单地更改时间选择器的格式。并且可以使用 moment.js 中的一些命名约定。如果您的格式类似于“DD/MM/YY - HH”，它只会显示小时。 该解决方案的缺点是选择器变得很奇怪，并且您无法真正知道自己在选择什么。因此，您在链接上提供的解决方案是仅选择时间的最佳方法。 经过很长一段时间后，我不得不在现有项目上使用引导日期时间选择器。所以我找到了stepping选项 stepping: 15 所以这里是 <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: one_month, minDate: new Date(), format: 'DD/MM/YYYY HH:mm', stepping: 15 }); }); </script>
我正在尝试更改 Bootstrap 中编码的导航栏的颜色。到目前为止，已经内置了应用于导航栏的 Bootstrap 类来更改背景颜色和锚点链接...
我有一张使用以下代码的引导卡： 我有一张使用以下代码的引导卡： <div class="card card-outline-danger text-center"> <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 我使用以下代码来使关闭按钮正常工作： <span class="pull-right clickable" data-effect="fadeOut"><i class="fa fa-times"></i></span> 关闭按钮不起作用，我是引导程序新手。因此，我需要一些帮助。 这不是bootstrap的标准功能，所以你需要给图标绑定一个JS点击事件，并触发它来关闭父级.card。我还在图标中添加了 cursor: pointer，使其看起来像可以单击的东西。 $('.close-icon').on('click',function() { $(this).closest('.card').fadeOut(); }) .close-icon { cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="card card-outline-danger text-center"> <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> 好吧，自从提出这个问题以来已经过去了一段时间，但仍然是实现可关闭卡片的好方法，无需任何自定义 JavaScript，仅使用 Bootstrap CSS 类，如下所示：card-header、Bootstrap 4 关闭图标的组合和 .mt-n5 上的负边距（此处为 card-body）。关闭图标很好地定位在卡片标题内，负边距将卡片内容拉近标题区域。 <div class="container"> <div id="closeablecard" class="card card-hover-shadow mt-4"> <div class="card-header bg-transparent border-bottom-0"> <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="card-body mt-n5"> <h5 class="card-title">Your Title</h5> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab. </p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div> 要实际关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 查看 JSFiddle 上的演示... HTH， 汉森 要真正关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放入按钮标签中：data-dismiss="alert" data-target="#closeablecard"。 data-target 是我们卡的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。 通过， 拉古尔·K
如何让 Twitter Bootstrap Accordion 保持一组开放？
我正在尝试使用 Twitter 引导程序使用手风琴和折叠插件来模拟 Outlook 栏，到目前为止，我已经使折叠和手风琴工作正常，但它目前允许所有部分
我一整天都在研究这个问题，但没有找到解决方案。我在一个容器中一行有 3 列。 1：右侧内容——右拉 2：导航-左拉 三：主要内容 什...
我正在与第三方网站合作，该网站允许我修改代码以满足我的需求。我有一个带有响应栏的产品页面。管理用户可以上传产品图片...
我不是造型方面的专家，我正在使用 bootstap 进行小型项目。 所以，我的问题是网格系统。我有两台显示器，第一个显示器的分辨率为 1920x1080，第二个显示器的分辨率为 1366x768。 我想说
我在使用 Bootstrap 3 时遇到问题 - 当我通过缩小页面来检查桌面上的响应功能时，它工作正常。它在 responsinator.com 等上也运行良好（来自桌面测试的 scr...
我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看 我正在使用引导缩略图来显示产品。 回声' 我试图在缩略图中显示一些广告，但它们之间有很大的空间..看看吧 我正在使用引导缩略图来展示产品。 echo '<div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img src='.$source.' alt="Generic placeholder thumbnail"> </div> <div class="caption"> <h3>'.$title.'</h3> <p>Price:Rs.'.$price.'</p><br> <p> <a href="'.$adress.'" class="btn btn-primary" role="button"> View </a> <a href="#" class="btn btn-primary" role="button"> Update </a> <a href="#" class="btn btn-default" role="button"> Delete </a> </p> </div> </div>'; CSS 引导程序： element.style { } @media (min-width: 992px) .col-md-3 { width: 25%; } @media (min-width: 992px) .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } @media (min-width: 768px) .col-sm-6 { width: 50%; } @media (min-width: 768px) .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } user agent stylesheetdiv { display: block; } Pseudo ::before element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Inherited from body body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } Inherited from html html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 请帮我移除大的空间。物品没有对齐。 针对特定网格尝试此操作： padding: 0
创建一个带有 3 条水平虚线或线条的 Bootstrap 3 按钮
如何创建一个 Bootstrap 3 按钮，其图标具有 3 条水平线/破折号作为典型的 Web 按钮设置。 ？ 我找不到这样的 ico/glyphicon 那么我怎样才能用 css 做到这一点？
在 Bootstrap 3 中单击导航栏元素外部时如何关闭打开的折叠导航栏？
如何在单击导航栏元素外部时关闭打开的折叠导航栏？目前，打开或关闭它的唯一方法是单击导航栏切换按钮。 请参阅此处的示例...
我正在尝试将 AdminLTE 项目集成到我的 java maven 项目中。 https://github.com/almasaeed2010/AdminLTE 我已经下载了代码，但不知道从哪里开始集成，因为我是新手