rails创建项目并使用bootstrap

Posted 2023-04-03

参考技术A rails 5.0 安装部署

1、新项目创建

rails new railsproject --skip-bundle （因为gfw的缘故）所以加--skip跳过bundle，等项目创建成功之后进入railsproject目录下打开gemfile 修改为 source'https://ruby.taobao.org'，然后进行bundle install

2、给项目安装bootstrap，使用的bootstrap-sass这个套件。

2.1、修改 Gemfile，在group :development, :test do前一行加入gem 'bootstrap-sass'

2.2、执行bundle install

3、使项目使用 Bootstrap

3.1 修改app/assets/stylesheets/application.css 文件为 application.scss

3.2 然后在 application.scss 文件添加如下两行

@import"bootstrap-sprockets";

@import"bootstrap";

4、使用bootstrap样式

4.1新建app/views/common 文件夹

4.2 在common文件夹下面新建_navbar.html.erb

4.3 在common文件夹下面新建_footer.html.erb

4.4 修改全域 HTML 样式 application.html.erb

4.5 新增一个控制器rails g controller welcome

4.6 新增一个欢迎页面 welcome/index.html.erb

4.7 将首页指到 welcome 下的 index.html.erb 页面

5、制作提示信息

5.1将 Boostrap 的 js 提示套件 bootstrap/alert “挂”进项目里面，在app/assets/app/assets/javascripts/application.jsrequre_tree上加入

//= require bootstrap/alert/

5.2 . 新增 app/views/common/_flashes.html.erb

5.3 新增 app/helpers/flashes_helper.rb

5.4 在 application.html.erb 内加入 flash 这个 partial，在<%= yield %>前加入<%= render "common/flashes" %>

在 CSS 中使用 glyphicon 作为背景图像：rails 4 + bootstrap 3

【中文标题】在 CSS 中使用 glyphicon 作为背景图像：rails 4 + bootstrap 3

【英文标题】：Using glyphicon as background image in CSS: rails 4 + bootstrap 3

【发布时间】：2014-04-11 05:55:53

【问题描述】：

我正在使用 bootstrap 的 collapse.js 来展开和折叠 Rails 应用程序中的一些输入组。我正在使用 JS 来确定该组是否扩展，并创建了 CSS 类来添加“+”或“-”来显示它是打开还是关闭：

打开：

关闭：

从 CSS 中可以看出，我在图片中使用了一个 png 的背景图片：

.expandable 
  background: url('/assets/plus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;


.expanded 
  background: url('/assets/minus.png');
  padding-top: 4px;
  width: 400px;
  height: 30px;
  background-repeat: no-repeat;
  padding-left: 55px;
  display: block;

我想使用 glyphicon-plus 和 glyphicon-minus 来代替这些 .png 文件。

最好的方法是什么？

更新：

为了获得正确的样式，我将 CSS 更改为：

.expandable 
  height:40px;
  width:50%;
  margin:6px;



.expandable:before
  content:"\2b";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;



.expanded 
  height:40px;
  width:50%;
  margin:6px;


.expanded:before
  content:"\2212";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:5px;

作为参考，我的 HTML 是：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <p1 class="panel-title" >
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="expandable">
          Provider details 
        </a>
      <p2>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        blah, blah....

和JS检测部分的打开/关闭：

$ ->
  $(".expandable").click () ->
    $this = $(this)
    if $this.hasClass("expandable")
      $this.removeClass("expandable").addClass "expanded"
    else $this.removeClass("expanded").addClass "expandable"  if $this.hasClass("expanded")
    return
  return

【问题讨论】：

引导程序 2 还是引导程序 3？

【参考方案1】：

在这里，试试这个 Bootply。这样就够了吗？

<div id="lol"></div>

---

#lol
    height:40px;
    border:1px solid #555;
  width:50%;
  margin:30px;

#lol:before
  content:"\2b";
  font-family:"Glyphicons Halflings";
  line-height:1;
  margin:10px;
  display:inline-block;

【讨论】：

不幸的是，这似乎对我不起作用。打开折叠部分后，我还需要将“+”更改为“-”。

为什么这不起作用，你能解释一下吗？您也可以创建两个类。一个带+，另一个带减号，并相应地切换它们！

更正-如果我将它添加到我现有的 CSS 类（可扩展和扩展）中，这将非常有效。最初我试图将它们添加为一个新类。感谢您的帮助！

【参考方案2】：

我做了类似的事情来获得箭头效果，使用绝对定位将字形移动到我想要的位置：

    li.arrow 
        &:after 
            content:"\e080";
            font-family:"Glyphicons Halflings";
            position: absolute;
            right: 15px;
            top: 10px;
        

        padding-right: 25px;