twitter-bootstrap 相关问题

我正在使用Bootstrap的SASS端口，我想知道使用预定义的mixins和使用SASS的@extend之间是否有什么区别。例如，如果我有：我正在使用 Bootstrap 的 SASS 端口，我想知道使用预定义的 mixin 和使用 SASS 的 @extend 之间是否有任何区别。例如，如果我有： <div class="wrapper"> Some content here.... </div> 做和做有什么区别吗 .wrapper { @include make-row(); } 和 .wrapper { @extend .row; } ？如果没有区别，是否还有其他 mixin 不等同于单个 @extend 语句？如果没有这样的 mixins，为什么会有 mixins 存在？ @extend 和 mixin 之间的最大区别在于 css 的编译方式。在简单的例子中，它看起来并不多，但差异和影响是显着的，如果不小心使用的话，在野外可能会让人非常头疼。 @extend有点像愚人金，乍一看很棒，但是...... 让我们看一个简单的例子： @扩展 .row { width: 50px; } .new-row { @extend .row; } .another-row { @extend .row; } 编译为： .row, .new-row, .another-row { width: 50px; } 混合 @mixin row() { width: 50px; } .new-row { @include row(); } .another-row { @include row(); } 编译为： .new-row { width: 50px; } .another-row { width: 50px; } mixin 包含它所点击的所有属性 - 每次都会复制它们 - 而 @extend 对选择器进行分组并定义一次属性。这并不是很明显，因为差异在于编译的 css，但它有一些重要的含义：加载订单使用@extend，选择器将被分组在 sass 中遇到它们的第一个点，这可能会导致一些奇怪的覆盖。如果您定义一个选择器并使用 @extend 引入属性并尝试覆盖之前在 sass 中定义的属性，但在扩展属性在 css 中分组之后，覆盖将不起作用。这可能相当令人困惑。考虑这组按逻辑顺序排列的 css 定义和可能的 HTML：<div class='row highlight-row'></div>: .red-text { color: red; } .row { color: green; } .highlight-row { @extend .red-text; } 编译为： .red-text, .highlight-row { color: red; } .row { color: green; } 因此，即使 sass 排序使其看起来行颜色为红色，编译后的 css 也会使其变为绿色分组不佳 @extend 可能会导致生成的 CSS 中选择器分组不佳。例如，您最终可能会得到三十或四十个不相关的事物，它们都共享相同的属性。使用 @extend 表示字体就是一个很好的例子。筑巢如果您使用深度嵌套的 sass（这可能是有益的，但不是最好的地方，除非您保持严格的纪律）并且您使用 @extend，您将为您使用的每个 @extend 复制完全嵌套的选择器，导致css臃肿。我已经看过很多次了： .selector-1 .selector-2 .selector-3 .selector-4, .selector-1 .selector-2 .selector-3 .selector-4 a, .selector-1 .selector-2 .selector-3 .selector-4 li, .selector-1 .selector-2 .selector-3 .selector-4 td { font-family: arial; } 如果您是 SASS 新手，那么查看编译后的 css 是值得的。媒体查询 @extend 不适用于媒体查询，因为媒体查询不是选择器。结论我的经验法则是，如果您没有参数，则在 mixin 上使用 @extend 并且如果您可以合理地定义 @extend 并在 sass 中附近存在的几个紧密相关的选择器之间共享它，例如，在定义 sass 模块的同一文件中。按钮是一个很好的使用 @extend 的例子： %button { padding: 10px; } .call-to-action { @extend %button; background-color: $green; } .submit { @extend %button; background-color: $grey; } 帮助做出选择的最佳文章是这里 PS，%符号是占位符扩展的使用

css twitter-bootstrap sass

回答 1 投票 0

摆脱 Twitter Bootstrap 中的所有圆角

在 Twitter Bootstrap 2.0 中，我想对一个非常四四方方的非圆形网站进行全局修改：摆脱 Bootstrap 中的所有圆角。是否有全局开关，或者最好的是什么...

css twitter-bootstrap twitter-bootstrap-2

回答 16 投票 0

使用 jQuery 设置 ASP.NET 下拉列表选定值

我有一个代码应该可以很好地在asp.net下拉列表上设置选定的值，但由于某种原因它不想在我的情况下工作，尽管它在其他项目中正常工作......

jquery asp.net jquery-ui twitter-bootstrap drop-down-menu

回答 2 投票 0

如何在.NET Core MVC 的部分视图中使用 jQuery 无阻碍验证？

我有一个 .NET MVC Core 应用程序，其中使用 Bootstrap Modal Popups 进行 CRUD 操作。我还有一个导航栏，其中有一个下拉菜单。我遇到了一个奇怪的错误。每当我点击...

javascript jquery twitter-bootstrap asp.net-core-mvc bootstrap5-modal

回答 1 投票 0

Bootstrap 与我自己的 css 文件冲突

我的自定义 main.css 无法更改字体大小或文本所在的位置，但是当我删除引导程序分配行时，它可以工作。我假设 bootstrap.css 已经设置了

html css twitter-bootstrap

回答 5 投票 0

twitter-bootstrap“禁用”类不适用于 ie9

使用引导程序，当您向按钮添加“.disabled”类时，它会更改其不透明度并禁用按钮单击。这适用于当前版本的 Chrome 和 Firefox。在 Internet Explorer 9 上，我

twitter-bootstrap internet-explorer-9

回答 2 投票 0

Bootstrap：垂直对齐段落文本和按钮

我的段落中有文本，其中有一个按钮元素：参加考试阅读课程材料后即可使用... 我的段落中有带有按钮 a 元素的文本： <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted">Available after reading course material</span> </p> 但是，这会呈现出两者不垂直对齐的情况。在这里对齐文本基线的最佳方法是什么？小提琴http://jsfiddle.net/0j20stbh/ 使用与 .btn 相同的样式可能是一个好方法。示例已禁用 .btn <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted btn" disabled="true">Text</span> </p> 或者创建一个具有相同属性的 .btn-align 类。示例 CSS .btn-align { padding: 6px 12px; line-height: 1.42857143; vertical-align: middle; } HTML <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted btn-align">Available after reading course material</span> </p> 在 Bootstrap 4 中，如果您不想为其创建特殊的 CSS 类，您可以使用实用程序来设置 display: inline-block 和 vertical-align: middle 来执行此操作。 <p> <a class="btn btn-outline-secondary" href="#">Take exam</a> <span class="text-muted d-inline-block align-middle">Available after reading course material</span> </p> 示例要调整按钮的垂直位置以匹配相邻文本，同时保留该文本的位置不变，您可以将适当命名的 align-baseline 类添加到按钮： <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <p> <a class="btn btn-default align-baseline" href="#">Take exam</a> <span class="text-muted">Available after reading course material</span> </p>

css twitter-bootstrap

回答 3 投票 0

如何在嵌入模式下显示日期范围选择器

如何在嵌入模式下使用daterangerpicker显示双日历我想将其显示为此处提供的示例：https://bootstrap-datepicker.readthedocs.io/en/latest/markup.ht...

javascript jquery twitter-bootstrap datepicker daterangepicker

回答 1 投票 0

EditorFor net-core 中的数据注释说明

问题是通过 EditorFor 扩展从我的模型获取数据注释“显示（描述）”属性。我发现的所有方法都涉及将实际模型传递给该方法。噗...

twitter-bootstrap asp.net-core .net-core razor popover

回答 1 投票 0

图像在 Bootstrap 3 中没有响应

我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？我正在编写以下代码。为什么图像在 Bootstrap 3 中没有响应？ <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">  <link rel="stylesheet" href="css/Style.css"> </head> <body> <div class="container"> <div class="rainbow"> <img src="img/header.png" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 我在 Bootstrap 2.3 上进行了测试，运行良好。将 'img-responsive` 类添加到 img... <img src="img/header.png" class="img-responsive" alt="DayCare" /> 您可以像这样轻松完成： <img src="img/header.png" style="width:100%; height:auto; display:block;" /> 如果标题图片的宽度小于屏幕宽度，则应在样式中添加 max-width，以在大视图中保持标题的原始宽度。例如，假设 header 的原始宽度是 600px，img 应该是这样的： <img src="img/header.png" style="width:100%; height:auto; display:block; max-width:600px" /> 同意 Skelly 的观点，img 响应式效果很好。我尝试使用此代码（删除 Style.css），工作正常。 <!DOCTYPE html> <html> <head>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> </head> <body> <div class="container"> <div class="rainbow"> <img class="img-responsive" src="bootstrap/resources/img/charpente/toulenne/IMGP0110.JPG" alt="DayCare" /> </div> </div>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 尝试删除 Style.css

twitter-bootstrap twitter-bootstrap-3

回答 3 投票 0

如何从 stackoverflow 代码片段中的单独按钮打开下拉菜单

使用“运行代码片段”按钮并单击“打开菜单”按钮运行代码片段不会执行任何操作。它应该打开菜单。菜单在 DOM 中的其他位置定义，显示设置为

javascript twitter-bootstrap drop-down-menu bootstrap-5 code-snippets

回答 1 投票 0

工具提示在引导模式下不起作用？

我使用 seiyria Angular-bootstrap-slider 作为范围滑块，但最初当页面加载时，工具提示位于错误的位置。当将其放置在正常页面中时，它工作正常，但在模态中它是初始的...

angularjs twitter-bootstrap bootstrap-slider

回答 3 投票 0

twitter-bootstrap 相关问题

最新问题