标签: bootstrap-sass

我不得不选择bootstrap-sass,twitter-bootstrap-rails并且我根据网络上的建议选择了第一个.

但是,我看到twitter-bootstrap-railsgem有一些用于应用程序布局的生成器.喜欢,

rails g bootstrap:layout application fixed
rails g bootstrap:themed Posts

我认为这对于启动项目非常有用.但我没有在bootstrap-sass宝石中找到类似的发电机.运行命令:

rails generate 

没有像以前那样显示任何生成器.

有没有办法让这些布局使用bootstrap-sass而不是使用twitter-bootstrap-rails？

提前致谢.

我正在使用twitter bootstrap sass 3.0.3.0 gem,它应该对应于最新的twitter bootstrap 3.0.3.我正在查看lESS变量的'customize'部分,但找不到太多颜色.如何获取bootstrap 3提供的颜色列表？

例如,搜索blue bootstrap 3 docs不会返回任何结果.而在bootsrap 2 docs中搜索蓝色则显示蓝色.

谢谢!

我有一个WordPress主题,我正在使用Bootstrap Sass源构建.样式是有效的,但大多数字形不是(只有星号和加号).我正在编译我的Bootstrap到style.css相对于那个,有一个文件夹调用fonts它来保存glyphicons(我设置$icon-font-path: "fonts/";)这是我编译的一个片段style.css,表明字体路径是正确的:

@font-face { font-family: 'Glyphicons Halflings'; src: url("fonts/glyphicons-halflings-regular.eot"); src: url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("fonts/glyphicons-halflings-regular.woff") format("woff"), url("fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
.glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

例如,这些工作:

<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

但这些不是:

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

这是一个glyphicon类的片段:

.glyphicon-asterisk:before { content: "\2a"; }
.glyphicon-plus:before { content: "\2b"; …

我正在尝试通过仅将所需的组件style.scss从 bootstrap sass导入文件来创建自定义引导程序。但是，当我导入和编译 3 个必需的组件时，我会收到一连串的弃用警告。

社会保障：

@import "./bootstrap-4.3.1/scss/functions";
@import "./bootstrap-4.3.1/scss/variables";
@import "./bootstrap-4.3.1/scss/mixins";

控制台警告（众多警告中的第一个）：

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ?
298 ? $headings-margin-bottom:      $spacer / 2 !default;
    ?                               ^^^^^^^^^^^
    ?
    bootstrap-4.3.1\scss\_variables.scss 298:31  @import
    style.scss 3:9                               root stylesheet

我正在使用以下版本的工具：

引导程序：4.3.1，Sass：1.33.0 compiled with dart2js 2.13.0

使用此版本组合有什么问题，或任何其他问题？我该如何解决？

我正在尝试用bootstrap-sass创建一个表单.我需要找到引导类的最佳配置,使其看起来不错.它没有按照我期望的方式显示,特别是当浏览器宽度小于特定大小时,标签和表单字段之间的空格会崩溃,并且它看起来不再好看.如果它只发生在小宽度上就可以了,但事实并非如此.我真的很感激这方面的一些帮助,真的,form-horizontal用bootstrap 格式化的最佳方法是什么？

这是我的代码:

<form class="form-horizontal center" role="form">
<%= form_for @user do |f| %>
  <div class="field">
    <%= f.label :fname, "First name:", class: "col-md-4 control-label" %>
    <%= f.text_field :fname %>
  </div>
  <div class="field">
    <%= f.label :lname, "Last name:", class: "col-md-4 control-label" %>
    <%= f.text_field :lname %>
  </div>
  <div class="field">
    <%= f.label :email, "Email:", class: "col-md-4 control-label" %>
    <%= f.text_field :email %>
  </div>
  <!--div class="form-group" -->
  <div class="field">
    <%= f.label :comments, "Comments:", class: "col-md-4 control-label" %>
    <%= f.text_field :comments %>
  </div> …

我目前有一个为 Bootstrap 2 运行 bootstrap-sass 的 Rails 4 应用程序。我使用 localhost 进行测试。我有带有登录屏幕的应用程序。输入字段是白色的，带有蓝色文本的非常细的灰色边框。当我在字段中输入时，输入字段的背景是白色和蓝色文本。但是，当我转到保存登录信息的登录屏幕时，信息会填满字段，但将两个字段的背景更改为黄色，文本为黑色。一个是文本字段，另一个是密码字段。

我希望使用我在视图中定义的 css 填写信息。有没有办法用 CSS 做到这一点？我没有发现任何有关此特定问题的信息。

任何帮助，将不胜感激。我会继续寻找。

更新 3/28/2014 上午 9:15 CDT

我成功地从 Martin 建议的链接中实施了解决方案，以更改自动填充的背景颜色。我决定猜测并搜索 webkit 字体颜色文本，并找到了更改自动填充字体颜色的解决方案。

这是我的解决方案：

input:-webkit-autofill {
  -webkit-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-moz-autofill {
  -moz-text-fill-color: $textColor;
  -moz-box-shadow: 0 0 0px 1000px white inset;
}
input:-o-autofill {
  -o-text-fill-color: $textColor;
  -o-box-shadow: 0 0 0px 1000px white inset;
}
input:-khtml-autofill {
  -khtml-text-fill-color: $textColor;
  -khtml-box-shadow: 0 0 0px 1000px white inset;
}

是什么区别bootstrap-sass,并bootstrap-sass-official在凉亭注册表？

凉亭注册表列出了两者,尽管它们都指向https://github.com/twbs/bootstrap-sass.

我正在开始我的第一个 Rails 项目。在这个项目中，我将使用 Bootstrap 和 SASS。我想避免（在大多数情况下）将与样式相关的类放入我的 HTML 中，如本文所述：

使用 Sass 在语义上@extend Bootstrap

我使用 Bower 并按照此处的说明将 bootstrap-sass 包含在我的项目中：

https://github.com/twbs/bootstrap-sass#bower-with-rails

现在 bootstrap 本身正在工作，因为我可以在我的 HTML 中使用它的类，并且一切都呈现得很好。但是，如果我尝试使用 Bootstrap 类扩展我的一个类，例如：

.myClass
  @extend .text-muted

然后我收到以下错误：

".myClass" failed to @extend ".text-muted".
The selector ".text-muted" was not found.
Use "@extend .text-muted !optional" if the extend should be able to fail.

我想这可能与我在 Bootstrap 之前加载的 Sass 文件有关，但我不知道该怎么做。

以下是我的application.css.sass文件的内容，其中有些是*= required，有些是@imported（不知道是不是应该这样处理）。

/*
 *= require components-font-awesome
 *= require_self
 *= require_tree .
 */
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/"
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets"
@import …

期待 Sassier Bootstrap 4，我（试图）在 Bootstrap 3.3.5 上从 Less 切换到 Sass 并设置所需的Gruntfile.js文件。我没有问题，编制少，但不能让步兵与萨斯工作，特别是，$ grunt和$ grunt watch这两个让我

Running "watch" task Waiting...

永远。

不用说它不会编译。我试过了$ grunt watch --verbose，得到了很多绿色OK的。

我想我有一些错误或效率低下，gruntfile.js但由于这是 Baby 的第一个 Gruntfile.js，我被困在这里。你能看出是什么原因造成的吗？

    /*** Created by morgan on 9/13/15. */    

    module.exports = function (grunt) {
          grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

        sass: {
          dev: {
        options: {
          includePaths: ['static/sass']
        },
        dev: {
          options: {
            style: 'expanded',
            compass: false
          },
          files: {
            'css/styles.css': 'sass/styles.scss'
          }
        }
      } …

我正在安装bootstrap-sassgem，这行与application.scss有关，这使我感到困惑。

'然后，删除所有* = require_self和* = require_tree。sass文件中的语句。而是使用@import导入Sass文件。

我是否要用和删除*= require_self并*= require_tree .替换它们，或者只是删除它们。import '@require_self'import '@require_tree .'

也适用于application.scss之内的任何其他导入文件，例如

 *= require dataTables/jquery.dataTables
 *= require froala/froala_editor.min.css

我应该将它们更改为

 @import 'dataTables/jquery.dataTables'
 @import 'froala/froala_editor.min.css'

只是感到困惑，想要确认在这里做什么。