首页 > 系统教程 文章详情

使用我自己的自定义样式表覆盖引导程序(override bootstrap with my own custom stylesheet)

系统教程 行业动态 更新时间:2024-06-14 17:02:18
使用我自己的自定义样式表覆盖引导程序(override bootstrap with my own custom stylesheet)

您可以看到我使用和不使用引导程序获得的表格样式的差异，但我想要相同的行为。

表格样式没有bootstrap

引导后的表格样式

application.css.scss

/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require_self *= require_tree . */ @import "bootstrap-sprockets"; @import "bootstrap";

general.css

.pos { color: #000; } .neg { color: #f00; } h1 { color:orange; text-align: center; } table.listing{ background: #C3D9FF none repeat scroll 0% 0%; -moz-border-radius:10px; -webkit-border-radius:10px; padding:20px 20px 40px; border-radius:10px; } table.listing tr.tr-head{ background: #fff; color:#990a10; font-weight:bold; text-align:center; } table.listing .tr-head td{ padding:5px; padding-left:10px; } table.listing .tr-odd{ background: #fff; text-align:center; padding:50px; color:#27292b; font-weight:600; font-size:14px; } table.listing .tr-even{ background: #f1f6ff; text-align:center; padding:50px; color:#27292b; font-weight:600; font-size:14px; } table.listing td.col-1{ width:10%; padding: 5px; padding-left:10px; } table.listing td.col-3{ width:13%; padding: 5px; padding-left:10px; }

index.html.erb

<h1>361° YAZD Statement</h1> <% balance = 0 %> <table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1"> <tr class="tr-head"> <td>Date</td> <td>Description</td> <td>Amount</td> <td>Discount</td> <td>Paid</td> <td>Balance</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <% @statements.each do |statement| %> <tr class="tr-<%= cycle('odd', 'even') %>"> <td class="col-1"><%= statement.date %></td> <td class="col-3"><%= statement.description %></td> <td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td> <td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td> <td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td> <% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %> <% color = balance >= 0 ? "pos" : "neg" %> <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td> </tr> <% end %> </table>

问题是当我导入bootstrap时缺少background属性;

table.listing{ background: #C3D9FF none repeat scroll 0% 0%; }

如果有人能帮助我，我真的很感激！

You can see the differences what i get for my table styling with and without using bootstrap but i want the same behavior instead.

table styling without bootstrap

table styling after bootstrap

application.css.scss

/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require_self *= require_tree . */ @import "bootstrap-sprockets"; @import "bootstrap";

general.css

.pos { color: #000; } .neg { color: #f00; } h1 { color:orange; text-align: center; } table.listing{ background: #C3D9FF none repeat scroll 0% 0%; -moz-border-radius:10px; -webkit-border-radius:10px; padding:20px 20px 40px; border-radius:10px; } table.listing tr.tr-head{ background: #fff; color:#990a10; font-weight:bold; text-align:center; } table.listing .tr-head td{ padding:5px; padding-left:10px; } table.listing .tr-odd{ background: #fff; text-align:center; padding:50px; color:#27292b; font-weight:600; font-size:14px; } table.listing .tr-even{ background: #f1f6ff; text-align:center; padding:50px; color:#27292b; font-weight:600; font-size:14px; } table.listing td.col-1{ width:10%; padding: 5px; padding-left:10px; } table.listing td.col-3{ width:13%; padding: 5px; padding-left:10px; }

index.html.erb

<h1>361° YAZD Statement</h1> <% balance = 0 %> <table class="listing" align="center" width="100%" cellpadding="1" cellspacing="1"> <tr class="tr-head"> <td>Date</td> <td>Description</td> <td>Amount</td> <td>Discount</td> <td>Paid</td> <td>Balance</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <% @statements.each do |statement| %> <tr class="tr-<%= cycle('odd', 'even') %>"> <td class="col-1"><%= statement.date %></td> <td class="col-3"><%= statement.description %></td> <td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td> <td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td> <td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td> <% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %> <% color = balance >= 0 ? "pos" : "neg" %> <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td> </tr> <% end %> </table>

The problem is when I import bootstrap the background property is missing;

table.listing{ background: #C3D9FF none repeat scroll 0% 0%; }

I really appreciate if anybody could help me out!!!

最满意答案

div h1 {
  color: orange;
  text-align: center;
}
.pos {
  color: #000;
}
.neg {
  color: #f00;
}
.myTable {
  background: #C3D9FF none repeat scroll 0% 0%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 20px 20px 40px;
}
.myTable .table,
.myTable tr {
  border: 2px solid #C3D9FF;
}
.table.listing tr.tr-head {
  background: #fff;
  color: #990a10;
  font-weight: bold;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-head td {
  padding: 5px;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-odd {
  background: #fff;
  color: #27292b;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-even {
  background: #f1f6ff;
  color: #27292b;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid #C3D9FF;
}
.table.listing td.col-1 {
  width: 10%;
  padding: 5px;
  border: 2px solid #C3D9FF;
}
.table.listing td.col-3 {
  width: 13%;
  padding: 5px;
  border: 2px solid #C3D9FF;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h1>361° YAZD Statement</h1>


  <div class="table-responsive myTable">
    <table class="table table-bordered listing text-center">
      <tr class="tr-head">
        <td>Date</td>
        <td>Description</td>
        <td>Amount</td>
        <td>Discount</td>
        <td>Paid</td>
        <td>Balance</td>
      </tr>
      <tr class="tr-even">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-odd">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-even">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-odd">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
    </table>
  </div>
</div> 
  
 

 

 您需要先将general.css更改为general.css.scss然后使用其他SCSS文件将其导入application.css.scss （因为您使用的是SCSS，所以您应删除所有注释/文本/要求在当前application.css.scss的顶部）： 
 
@import "bootstrap-sprockets";
@import "bootstrap";
@import "general";
 

 在进行这些更改后，您可能也应该重新启动服务器。 
 
 
  
  
div h1 {
  color: orange;
  text-align: center;
}
.pos {
  color: #000;
}
.neg {
  color: #f00;
}
.myTable {
  background: #C3D9FF none repeat scroll 0% 0%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 20px 20px 40px;
}
.myTable .table,
.myTable tr {
  border: 2px solid #C3D9FF;
}
.table.listing tr.tr-head {
  background: #fff;
  color: #990a10;
  font-weight: bold;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-head td {
  padding: 5px;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-odd {
  background: #fff;
  color: #27292b;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid #C3D9FF;
}
.table.listing .tr-even {
  background: #f1f6ff;
  color: #27292b;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid #C3D9FF;
}
.table.listing td.col-1 {
  width: 10%;
  padding: 5px;
  border: 2px solid #C3D9FF;
}
.table.listing td.col-3 {
  width: 13%;
  padding: 5px;
  border: 2px solid #C3D9FF;
} 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h1>361° YAZD Statement</h1>


  <div class="table-responsive myTable">
    <table class="table table-bordered listing text-center">
      <tr class="tr-head">
        <td>Date</td>
        <td>Description</td>
        <td>Amount</td>
        <td>Discount</td>
        <td>Paid</td>
        <td>Balance</td>
      </tr>
      <tr class="tr-even">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-odd">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-even">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
      <tr class="tr-odd">
        <td class="col-1">11-20-2015</td>
        <td class="col-3">Something</td>
        <td class="col-1">10,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1 neg">20,000</td>
        <td class="col-1">50,000</td>
      </tr>
    </table>
  </div>
</div> 
  
 

 

You need to first change general.css to general.css.scss then import it into application.css.scss with your other SCSS files (and since you're using SCSS you should remove all of the comments/text/requires that you have at the top of your current application.css.scss):
 
@import "bootstrap-sprockets";
@import "bootstrap";
@import "general";
 

You should probably restart your server as well after these changes are made.

更多推荐

table,bootstrap,file,listing,电脑培训,计算机培训,IT培训"/> <meta name="

本文发布于:2023-04-21 18:45:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/dzcp/eff9b8ba571e01eedd67d8d9ea02a959.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：自己的   自定义   样式表   程序   custom

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表