twitter-bootstrap-3 相关问题

Bootstrap 3是前端框架的第三代，允许更快速的Web开发，具有迷人的外观和感觉。与[twitter-bootstrap]标签一起使用

我正在尝试在引导模式中设置默认按钮。这是代码：http://plnkr.co/edit/1aLlDdL8WfkUrBVt4q31?p=preview 在模式窗口中，我希望“提交”按钮成为默认按钮。我

javascript jquery angularjs twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

我正在使用 Bootstrap 3（完整版），并且在代码中使用 bootstrap 模式：我正在使用 Bootstrap 3（完整版），并且我在代码中使用 Bootstrap 模式： <a data-toggle="modal" data-target="deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a>  <div id="deleteMessage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 此代码是我从官方文档复制的，但它不起作用，模式窗口不显示。有什么问题吗？尝试将锚定代码更改为： <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 教程里好像有错字，data-target属性里应该多了个“#”。您忘记将 # 包含到 data-target 属性中 <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 现场演示

html twitter-bootstrap twitter-bootstrap-3 modal-dialog

回答 2 投票 0

如何使用 Angular 6 和 bootstrap 3.3.7 创建可折叠/可扩展/带有复选框列表的树结构

我正在尝试在父节点和子节点上都带有复选框的可折叠/树结构。我无法准确地创建它。我能够从 JSON 创建无序列表 { &...

javascript angular twitter-bootstrap typescript twitter-bootstrap-3

回答 1 投票 0

将输入填充到 Bootstrap 表格单元格的高度和宽度

我有一个表格（使用 Bootstrap 3.0），每个单元格中都有一个输入字段我有一个表格（使用 Bootstrap 3.0），每个单元格中都有一个输入字段 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table id="itemTable" border="1" class="table table-bordered table-striped"> <thead> <tr> <th >Quantity</th> <th>Unit</th> <th>Material Name</th> <th>PO Vatable</th> <th>PO TAX</th> <th>PO Total</th> </tr> </thead> <tbody> <tr> <td> <input type="number" min="1" class="form-control" name="Quan[]"> </td> <td> <select id="BX_gender" name="Unit[]"> <option>Kg</option> <option>Piece</option> <option>Meter</option> <option>Pound</option> <option>Gram</option> <option>Feet</option> </select> </td> <td><input type="text" name="Material[]"> </td> <td><input type="number" step="0.01" class="small" name="POVATABLE[]"> </td> <td><input type="number" step="0.01" class="small" name="POTAX[]"> </td> <td><input type="number" step="0.01" class="small" name="POTOTAL[]" onkeyup="onRequestTotalModification(this.parentNode.parentNode.rowIndex)"> </td> </tr> </tbody> </table> 我试图将输入设置为包含它的单元格的宽度和高度，但没有任何效果（即使是内联样式）。我使用 thead 和 tbody 标签组织了表格，但它没有修复任何问题如果您尝试让输入成为整个单元格，则需要删除 TD 元素上的引导程序默认填充。 https://jsfiddle.net/2ay5yuq3/2/ .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{ padding: 0; }

html css twitter-bootstrap-3

回答 1 投票 0

将标签与 Bootstrap Toggle 左侧对齐

我正在使用引导切换来创建开关，如下所示：我正在使用引导切换来创建开关，如下所示： <form> <div class="checkbox"> <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox"> <label> Toggle Text Left <input type="checkbox" data-toggle="toggle" /> </label> </div> </form> 有没有办法将标签移到开关左侧？我尝试将文本放在输入之前，但不太合适。 http://jsfiddle.net/sjxd1vpt/2/ 或者，如果您不是特别需要标签标签，您可以使用跨度。 <form> <div class="checkbox"> <input type="checkbox" data-toggle="toggle" checked="checked" /> <span> Toggle Text Right </span> </div> <div class="checkbox"> <span> Toggle Text Left </span> <input type="checkbox" data-toggle="toggle" /> </div> bootstrap-toggle css 似乎有一个 margin-left: -20px; 只需将自定义类添加到所需的左标签即可。 .left .toggle { margin-left: 5px; } 这将维持 Bootstrap-Toggle 预期的结构，以防它们有样式绑定，例如： label input { // some input targeted styling } http://jsfiddle.net/sjxd1vpt/5/ 您应该使用 bootstrap container-fluid 包装器来实现效果。 <form> <div class="checkbox container-fluid" > <label> <input type="checkbox" data-toggle="toggle" checked="checked" /> Toggle Text Right </label> </div> <div class="checkbox container"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> 默认情况下，Bootstrap 将 float: left 添加到 .form-check-input 只需用 float: none 覆盖它并在 html 中的输入之前放置标签。交换标签和输入为容器div设置style="display:contents" 设置 style="float:none;margin-left:0.5rem" 输入您的标签标签应在输入标签之前关闭。 <form> <div class="checkbox"> <label> Toggle Text Right </label> <input type="checkbox" data-toggle="toggle" checked="checked" /> </div> <div class="checkbox"> <label> Toggle Text Left </label> <input type="checkbox" data-toggle="toggle" /> </div> </form> 这应该可以防止按钮切换与文本重叠。这里：http://jsfiddle.net/sjxd1vpt/4/

html css twitter-bootstrap twitter-bootstrap-3

回答 6 投票 0

引导进度条没有进度

引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "首页"; } 引导进度条在我的 MVC 索引视图上不起作用。我已经用 Chrome 和 Internet Explorer 尝试过了。 @{ ViewBag.Title = "Home Page"; } <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <div class="progress-bar progress-striped "></div> </div> </div> 本次聚会迟到了，但在我使用的 Bootstrap 版本（v3.1.1）中，该类是“progress-striped”（不是像文档所说的“progress-bar-striped”），并且它和“active” ' 类必须应用于外部 div: <div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">Some text</div> </div> 查看 CSS，选择器“progress-bar”已更改为“bar”： ./bootstrap.css: .progress { ... } .progress .bar { ... } 因此，将您的代码更改为 <div class="progress"> <div class="bar"> </div> </div> 然后就可以了。不确定这种疯狂的原因是什么，似乎引导文档还没有更新。 <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> </div> 这样进度动画就可以工作了。 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> 上面是 bootstrap v3.1.1 的代码，看起来你的进度条 div 缺少一些元素？如果您使用 Bootstrap v4 并且需要动画，则需要使用 progress-bar-animated 而不是 active。

twitter-bootstrap twitter-bootstrap-3

回答 5 投票 0

具有等效表行跨度和列跨度的引导网格

我正在尝试在 bootstrap3 中创建一个像这样的布局在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ 。容器 { 顶部边距：10px； } 我正在尝试在 bootstrap3 中创建一个像这样的布局在这里找到类似的东西但无法使其工作： https://jsfiddle.net/SxcqH/52/ .container { margin-top: 10px; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row-fluid"> <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div> <div class="span8"> <div class="row-fluid"> <div class="span6"><div class="well">2</div></div> <div class="span6"><div class="well">3</div></div> </div> <div class="row-fluid"> <div class="span6"><div class="well">4</div></div> <div class="span6"><div class="well">5</div></div> </div> </div> </div> <div class="row-fluid"> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> <div class="span4"> <div class="well">6</div> </div> </div> 我能够使用嵌套网格来做到这一点 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="row mx-auto" style="height: 200px;"> <div class="col-sm-6"> <div class="row ">  <div class="col-sm-12 ">  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA </div> <div class="row">  <div class="col-sm-6"> BBBBBBB </div> <div class="col-sm-6"> CCCCCCCCC </div> </div> </div> </div> <div class="col-sm-3"> DDDDDD </div> </div> </div>

twitter-bootstrap twitter-bootstrap-3

回答 1 投票 0

使用引导响应网格系统时如何为图像提供动态宽度和高度

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示：这是加载后的样子：你可以...

html css twitter-bootstrap twitter-bootstrap-3

回答 7 投票 0

仅在验证表单时打开模式

我想仅在表单完全验证无错误时打开模式对话框。首先，我禁用了按钮，以便它首先验证，并且仅当表单为

javascript jquery html validation twitter-bootstrap-3

回答 2 投票 0

在 React 中有条件地应用类属性

我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示：我想根据从父组件传入的内容有条件地显示和隐藏此按钮组，如下所示： <TopicNav showBulkActions={this.__hasMultipleSelected} /> __hasMultipleSelected: function() { return false; //return true or false depending on data } var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"> <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Bulk Actions <span className="caret"></span> </button> <ul className="dropdown-menu" role="menu"> <li><a href="#">Merge into New Session</a></li> <li><a href="#">Add to Existing Session</a></li> <li className="divider"></li> <li><a href="#">Delete</a></li> </ul> </div> </div> </div> ); } }); 然而，{this.props.showBulkActions ? 'show' : 'hidden'}什么也没发生。我在这里做错了什么吗？花括号位于字符串内部，因此它被评估为字符串。他们需要在外面，所以这应该可行： <div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}> 注意“向右拉”后面的空格。您不想意外提供类“pull-rightshow”而不是“pull-right show”。括号也需要在那里。正如其他人评论的那样，classnames实用程序是当前推荐的在 ReactJs 中处理条件 CSS 类名的方法。在您的情况下，解决方案将如下所示： var btnGroupClasses = classNames( 'btn-group', 'pull-right', { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } ); ... <div className={btnGroupClasses}>...</div> 顺便说一句，我建议您尽量避免同时使用 show 和 hidden 类，这样代码会更简单。最有可能的是，您不需要为默认显示的内容设置类。 2021 年附录：为了提高性能，您可以查看 clsx 作为替代方案。如果您使用的是转译器（例如Babel或Traceur），您可以使用新的ES6“模板字符串”。这是@spitfire109的答案，进行了相应修改： <div className={`btn-group pull-right ${this.props.showBulkActions ? 'shown' : 'hidden'}`}> 这种方法允许您做类似的巧妙事情，渲染 s-is-shown 或 s-is-hidden: <div className={`s-${this.props.showBulkActions ? 'is-shown' : 'is-hidden'}`}> 您可以简单地执行以下操作。 let classNameDependsOnCondtion = i18n.language == 'en' ? "classname" : ""; className={`flex flex-col lg:flex-row list-none ${classNameDependsOnCondtion }`} 或 className={`flex flex-col lg:flex-row list-none ${i18n.language == 'en' ? "classname" : ""}`} 您可以在此处使用字符串文字 const Angle = ({show}) => { const angle = `fa ${show ? 'fa-angle-down' : 'fa-angle-right'}`; return <i className={angle} /> } 更换： <div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">` 与： <div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`} 如果您只需要一个可选的类名： <div className={"btn-group pull-right " + (this.props.showBulkActions ? "show" : "")}> 或者使用 npm classnames。它非常简单且有用，特别是对于构建类列表扩展@spitfire109的好答案，可以做这样的事情： rootClassNames() { let names = ['my-default-class']; if (this.props.disabled) names.push('text-muted', 'other-class'); return names.join(' '); } 然后在渲染函数中： <div className={this.rootClassNames()}></div> 保持 jsx 简短您可以使用 ES6 数组代替类名。答案基于 Axel Rauschmayer 博士的文章：有条件地在数组和对象文字中添加条目。 <div className={[ "classAlwaysPresent", ...Array.from(condition && ["classIfTrue"]) ].join(" ")} /> 2019： React 拥有很多实用工具。但你不需要任何 npm 包。只需在某个地方创建函数 classnames 并在需要时调用它即可； function classnames(obj){ return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' '); } 或 function classnames(obj){ return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' '); } 示例 stateClass= { foo:true, bar:false, pony:2 } classnames(stateClass) // return 'foo pony' <div className="foo bar {classnames(stateClass)}"> some content </div> 只是为了灵感声明辅助 DOM 元素并使用它的原生 toggle 方法： (DOMTokenList)classList.toggle(class,condition) 示例： const classes = document.createElement('span').classList; function classstate(obj){ for( let n in obj) classes.toggle(n,obj[n]); return classes; } <div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} /> .filter(Boolean) 从数组中删除“错误”值。由于类名必须是 strings，因此除此之外的任何内容都不会包含在 new 过滤数组中。 console.log( ['foo', true && 'bar'].filter(Boolean).join(' ') ) console.log( ['foo', false && 'bar'].filter(Boolean).join(' ') ) 上面写成函数： const cx = (...list) => list.filter(Boolean).join(' ') // usage: <div className={cx('foo', condition && 'bar')} /> var cx = (...list) => list.filter(Boolean).join(' ') console.log( cx('foo', 1 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 1 && 'baz') ) console.log( cx('foo', 0 && 'bar', 0 && 'baz') ) 更优雅的解决方案，更利于维护和可读性： const classNames = ['js-btn-connect']; if (isSelected) { classNames.push('is-selected'); } <Element className={classNames.join(' ')}/> 就用这个方法-- <div className={`${this.props.showActions ? 'shown' : 'hidden'}`}> 这更加整洁干净。你可以使用这个： <div className={"btn-group pull-right" + (this.props.showBulkActions ? ' show' : ' hidden')}> 当您要附加多个类时，这非常有用。您可以使用空格将所有类连接到数组中。 const visibility = this.props.showBulkActions ? "show" : "" <div className={["btn-group pull-right", visibility].join(' ')}> 我尝试定制我的答案，以在帖子中包含所有可能的最佳解决方案有很多不同的方法可以完成此任务。 1.类内嵌 <div className={`... ${this.props.showBulkActions ? 'show' : 'hidden'}`}> ... </div> 2.使用这些值 var btnClass = classNames( ... { 'show': this.props.showBulkActions, 'hidden': !this.props.showBulkActions } ); 3.使用变量 let dependentClass = this.props.showBulkActions ? 'show' : 'hidden'; className={`... ${dependentClass }`} 4.使用 clsx <div className={clsx('...',`${this.props.showBulkActions ? 'show' : 'hidden'}`)}> ... </div> 这对你有用 var TopicNav = React.createClass({ render: function() { let _myClasses = `btn-group pull-right {this.props.showBulkActions?'show':'hidden'}`; return ( ... <div className={_myClasses}> ... </div> ); } }); 参考@split fire的答案，我们可以用模板文字来更新，这样可读性更强，供参考查看javascript模板文字 <div className={`btn-group pull-right ${this.props.showBulkActions ? 'show' : 'hidden'}`}> 您可以使用this npm 包。它处理所有事情，并具有基于变量或函数的静态和动态类的选项。 // Support for string arguments getClassNames('class1', 'class2'); // support for Object getClassNames({class1: true, class2 : false}); // support for all type of data getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { class5 : function() { return false; }, class6 : function() { return true; } }); <div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1" 根据this.props.showBulkActions的值，您可以动态切换类别，如下所示。 <div ...{...this.props.showBulkActions ? { className: 'btn-group pull-right show' } : { className: 'btn-group pull-right hidden' }}> 我想补充一点，您还可以使用可变内容作为课程的一部分 <img src={src} alt="Avatar" className={"img-" + messages[key].sender} /> 上下文是机器人和用户之间的聊天，样式根据发送者的不同而变化，这是浏览器结果： <img src="http://imageurl" alt="Avatar" class="img-bot"> 根据参数（如果存在）返回正确类的函数 getClass(param){ let podClass = 'classA' switch(param.toLowerCase()){ case 'B': podClass = 'classB' break; case 'C': podClass = 'classC' break; } return podClass } 现在只需从要应用相应类的 div 调用此函数即可。 <div className={anyOtherClass + this.getClass(param)} 我成功地使用此逻辑将正确的颜色应用到我的引导表行。 <div className={"h-3 w-3 rounded-full my-auto " + (index.endDate ==="present"? "bg-green-500":"bg-red-500")}></div> 不要忘记在静态类名称后面添加额外的空格。

javascript css twitter-bootstrap-3 reactjs class-attributes

回答 24 投票 0

Bootstrap 3 - 输入组中的按钮不在同一高度

我使用Bootstrap 3，使用输入组，使用按钮并使用glyphicon作为按钮，但奇怪的是按钮的高度不一样，如何使按钮的高度相同？我的简单codi...

php html twitter-bootstrap-3

回答 1 投票 0

显示带有 Angular js 数据绑定表单的引导箱

我两周前开始使用 Angular JS，并对它的数据绑定功能感到非常惊讶。我也非常喜欢使用 bootboxjs 向用户显示消息和所有信息。 ...

javascript angularjs twitter-bootstrap twitter-bootstrap-3

回答 4 投票 0

引导程序左右填充不起作用

我正在学习引导程序，今天我想处理边距和填充，但是处理这些时，每当我应用整体填充或填充顶部或填充时，我都会面临引导程序的奇怪行为