标签: bootstrap-sass

在更新我的bootstrap-sass宝石以3.1.0利用模态(.modal-lg和.modal-sm)上的新尺寸选项之后,我一直无法获得应用的样式.我的代码如下:

<div aria-hidden="false" aria-labeldby="ccModalLabel" class="modal fade in" id="ccModal" role="dialog" style="display: block;">
  <div class="modal-dialog modal-sm">
    ...content...
  </div>
</div>

据我所知,这与所有重要属性中的示例几乎完全相同:

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

然而,经检查,该modal-sm班是不是已经在我的代码进行评估,因为它是在这个例子中,导致我想,也许这是不包括在创业板不知怎么的,还是我失去了一些东西？除了尺寸外,模态在其他方面起作用.

我试图预编译资产用于生产.除非我将bootstrap和font-awesome资产包含为静态文件(或来自CDN的主机),否则sass-rails在尝试编译生产资产时会失败.我的Gemfile看起来像这样:

# Default asset gems
gem 'coffee-rails', '~> 4.0.0'
gem 'sass-rails'  , '~> 4.0.3'
gem 'uglifier'    , '>= 1.3.0'

# Default gems
gem 'jbuilder', '~> 2.0'
gem 'sdoc'    , '~> 0.4.0', group: :doc

# Added gems
gem 'carrierwave'
gem 'pg'
gem 'turbolinks'
gem 'restforce'

# Asset gems
gem 'jquery-rails'
gem 'autoprefixer-rails'
gem 'bootstrap-sass'
gem 'font-awesome-sass'
gem 'handlebars_assets'
gem 'iconv'

当我尝试编译资产时,我收到以下错误:

?  stylesheets git:(master) ? rake assets:precompile
(in /home/ubuntu/spice-conduit)
rake aborted!
Sass::SyntaxError: Invalid CSS after "    filter: progid": expected ";", was …

我遵循bootstrap-sass-loader页面上的instrtuctions

在我的package.json我得到了

"bootstrap-sass": "^3.3.6",
"bootstrap-sass-loader": "^1.0.9"

这是我的webpack.config.js

module.exports = {
  entry: ['./app.js'],
  output: {
    publicPath: 'http://localhost:8080/',
    filename: 'build/bundle.js'
  },
  devtool: 'eval',
  module: {
    /* used on code before it's transformed */
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'source-map'
      }
    ],
    /* used to modify code */
    loaders: [

      {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},
      {test: /\.obj|\.mtl|\.html|\.dae|\.txt/, loader: "raw"},
      {test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel'},
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, …

我正在尝试在我的Rails应用程序中创建新的Twitter Bootstrap按钮,所以我不必覆盖旧的.使用Bootstrap-Sassgem,我已经弄清楚如何覆盖默认按钮(如btn-warning类'Twitter blue'):

$twitterBlue:#4099FF;
$btnWarningBackground: $twitterBlue; // (twitter blue)
$btnWarningBackgroundHighlight:     $twitterBlue;

我想定义一个btn-twitter类,等等,但我似乎无法弄清楚如何将所有Bootstrap样式复制到新按钮中.我尝试过这样的事情:

$twitterColor: #4099FF;             // (twitter blue)
$btnTwitterBackground:              lighten($twitterColor, 15%);
$btnTwitterBackgroundHighlight:     $twitterColor;

.btn-twitter {
   background: $twitterBlue;
   // something goes here to inherit the base button styles
}

但这只是制作一个默认样式的按钮.

我仍然是SASS的新手,并且不太了解LESS - > SASS转换后幕后发生的魔法.还没有找到关于创建新按钮的网络上的任何内容.如果那里有什么东西,请随意指出它:)

提前致谢!

编辑 虽然与问题没有完全相关,但我想我会提供一个超级方便的Bootstrap-Sass变量表链接,这对我在Rails项目中扩展Bootstrap有很大帮助:https://github.com/ thomas-mcdonald/bootstrap-sass/blob/master/templates/project/_variables.scss.

从下面的屏幕截图中可以看出,链接未在div的底部对齐.如何对齐按钮编辑,删除,添加购物车 在底部DIV.注意我没有使用表格.

.bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; margin:7px;}
.fixedheight { height: 208px; position:relative; border:1px solid; margin:7px;}

下面显示了模板的相关位,用于呈现屏幕截图如下所示的页面.请注意,使用css class ="bottomaligned"仍然没有对齐链接.即使我添加 宽度:300px; 到了css类.fixedheight,它们仍然没有对齐.

 <div class="row">

  <% @products.each do |product| %>


 <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

    <div class="bottomaligned">
     <%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %>

     <%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %>

     <%= button_to "Add to cart", order_items_path(product_id: product) %> …

我正在使用Flexy模板(使用引导程序),我无法在选项卡上显示shown.bs.tab事件.

我已经设法让它在JSFiddle上运行.

这是我在模板中使用的代码,它什么都不产生:

<div role="tabpanel">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="chart1">Tab 1 Content</div>
    <div class="tab-pane" id="chart2">Tabe 2 Content</div>
  </div>
</div>

<script>
  $(function() {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      alert(e.target.href);
    })
  });
</script>

我能错过什么？如果我在Flexy代码上复制/粘贴此代码,则无效.了解错误的步骤是什么？谢谢 !

添加之间的相应差异是什么？

//= require bootstrap-sprockets

和

//= require bootstrap

到application.js？

该文件说:

bootstrap-sprockets提供单独的Bootstrap Javascript文件(例如alert.js或dropdown.js),而bootstrap提供包含所有Bootstrap Javascripts的连接文件

有人提供比其他人更好的表现吗？

我使用angular-cli:1.0.0-beta.19-3 with node:v5.11.1

在我的angular-cli.json文件中,我已将全局样式文件扩展名设置为.scss.

这是我的样式文件.

angular2/SRC/styles.scss

// Default Font
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 14px;
$line-height-base: 1.6;
$text-color: #636b6f;

// Import bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

当我尝试导入bootrap-sass模块时,错误会吐出,它会给出与glyphicon图标相关的错误.不知道如何解决它.

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/angular/src'
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4253-4315 6:4338-4400
 @ ./src/styles.scss
 @ multi styles

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/var/www/angular2/src'
 @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:4452-4516
 @ ./src/styles.scss
 @ multi styles

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't …

我使用angular-cli引导了Angular 2应用程序.在我决定使用bootstrap模态之前,一切都很容易.我只是复制了从不使用angular-cli的其他项目中打开模态的代码.我将jquery和bootstrap依赖项添加到angular-cli.json文件中的脚本中.jQuery在项目中被识别,但是当我尝试this.$modalEl.modal(options)在角度组件内运行时,我得到一个错误jQuery is not defined.

实际上jQuery被导入到项目中但作为全局$.我做了一些挖掘,显然bootstrap期望jQuery作为'jQuery'变量传递给它.它没有给老鼠的屁股$.

我可以像在其他项目中一样jQuery在webpack.config.js文件中公开变量:(为简洁起见省略了很多代码)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

但angular-cli开发团队决定不让其他开发者干涉webpack配置文件.多谢你们!非常考虑你.

我已经尝试将jQuery直接导入到Angular组件中,并在这里提到了一些其他的东西https://github.com/angular/angular-cli/issues/3202(将进口添加到vendor.ts文件然后添加vendor.ts到angular-cli.json中的scripts数组但没有任何效果.

说实话,我很生气这样一个微不足道的问题,比如在angular-cli中增加jquery依赖性bootstrap就是这样一个雷区.

你有没有处理类似的问题？

我不得不选择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？

提前致谢.