Rails中Bootstrap的安装和使用

最新推荐文章于 2023-07-25 15:29:45 发布
最新推荐文章于 2023-07-25 15:29:45 发布
阅读量1.2w 收藏 6
点赞数
分类专栏： Rails Ruby
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lissdy/article/details/9195651
版权
Rails 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
Ruby
25 篇文章 0 订阅
订阅专栏

眼看着前端攻城师们都开始使用Bootstrap创作网页，于是也想学着在最近正在学习的Rails中使用Bootstrap。

具体安装使用过程如下：

1、创建Rails工程

rails new usedschool


2、生成脚手架

rails g scaffold Item title:string description:text --skip-stylesheets


3、应用迁移

rake db:migrate


4、修改Gemfile文件，加入要安装的bootstrap相关包



5、安装相关包

bundle install

在这里我遇到了一个Ruby版本限制的问题，将Ruby升级之后才顺利安装好了bootstrap相关包。

具体升级操作请查看这里：Ruby升级


6、运行rails g bootstrap:install生成bootstrap相关文件


到目前为止，bootstrap已经成功安装，下面来看下使用方法

7、修改application.html.erb布局文件

这一步修改模版，毕竟对bootstrap具体用法还不熟悉，所以直接拿来主义，找模版过来套用。

套用模版http://www.bootcss.com/examples/fluid.html

<!DOCTYPE html>
<html>
<head>
  <title>一起二</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">一起二</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
         	 <%= yield %>
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>© By lissdy 2013</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//cdnjs.bootcss.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

  </body>
</html>


8、修改Item整体页面风格

rails g bootstrap:themed items -f

运行结果：




肿么样？比Rails直接生成的好看多了吧偷笑





李小西033
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
rails 使用bootstrap及bootswatch
压碎起重机
07-07 2980
1.简介       Twitter-bootstrap是一个功能强大的前端web框架，使用它可以快速地开发出漂亮的web UI。而thomas-mcdonald/bootstrap-sass是rails sass版本的bootstrap。其他类似的gem还有jlong/sass-twitter-bootstrap，metaskills/less-rails-bootstrap，seyhun
Bootstrap for Rails (2015)
10-27
Bootstrap 3 和 Rails 4(样例用的是Ruby 2.1.1，Rails 4.1.4） Table of Contents Preface 1 Chapter 1: Introducing Web Application Development in Rails 7 Why Bootstrap with Rails? 8 Setting up a Todo application in Rails 8 Analyzing folder structure of a Rails application 10 Creating views 12 Styling views using CSS 14 Redesigning the Todo application 16 Challenges in styling a Rails application traditionally 23 Summary 24 Chapter 2: Introducing Bootstrap 3 25 What is Bootstrap? 26 Installing Bootstrap in a Rails project 27 Placing Bootstrap files in a Rails project 28 Bootstrap – the Sass way 33 Bootstrap through CDN 35 Summary 36 Chapter 3: Powering a Rails App with Bootstrap's Grid System 37 What is Bootstrap's grid system? 38 Nesting columns 45 Implementing Bootstrap's grid system in a Rails application 46 Summary 54  Table of Contents Chapter 4: Using Bootstrap's Typography, Buttons, and Images in a Rails Application 55 Setting up 56 Styling typography 57 Aligning text 61 Text transformation 62 Blockquotes 62 Styling listing elements 64 Creating and styling buttons 67 Which elements are eligible to use Bootstrap's button classes? 70 Styling images in Bootstrap 70 Summary 72 Chapter 5: Reinventing Tables and Forms in Bootstrap 73 Creating Bootstrap tables 73 Creating Bootstrap forms 79 Validation classes in Bootstrap forms 84 Adding Bootstrap table a to our Rails application 85 Adding Bootstrap forms to our Rails application 90 Summary 94 Chapter 6: Creating Navigation Bars 95 Getting started with a navigation bar 95 Navigation bar helper classes 102 Adding a navigation bar to the Rails application 103 Summary 105 Chapter 7: Various Other Bootstrap Components 107 Bootstrap Breadcrumbs 107 The pagination component 108 Bootstrap labels and badges 109 Bootstrap jumbotrons 110 Alerts 111 Creating a progress bar 112 Panels 114 Summary 116 Chapter 8: Working with Bootstrap Modals 117 Getting started with modals 117 Changing Bootstrap's modal size 121 Additional Bootstrap modal features 122 [ ii ]  Table of Contents Fetching remote content from a Bootstrap modal 123 Using Bootstrap's modal in a Rails application 125 Summary 128 Chapter 9: Creating Image Slideshows with Bootstrap Carousel 129 Getting started with Bootstrap Carousel 130 Adding captions to the slides 138 Customizing Carousel 138 Summary 138 Chapter 10: Creating a Shopping Cart Using Bootstrap Modals 139 Adding a shopping cart symbol 139 Creating a shopping cart using modals 141 Summary 146 Appendix: Adding Custom Styles to a Rails Application 147 Adding Bootstrap-sass to a Rails application 147 Customizing Bootstrap through variables 149 Summary Index 150 151
shine:Angular，Rails，Bootstrap和Postgres！
05-10
闪耀 Angular，Rails，Bootstrap和Postgres！
rails-bootstrap-navbar：在Rails应用程序中轻松生成Bootstrap导航栏
01-31
Rails引导导航栏 在Rails应用中轻松生成导航栏 安装 将此行添加到您的应用程序的Gemfile中： gem 'rails_bootstrap_navbar' 然后执行： $ bundle 或自己安装为： $ gem install rails_bootstrap_navbar 要求 来自Bootstrap> = 2.0的必需文件必须单独包含，它们不是此gem的一部分。 如果要在导航栏中使用这些文件，至少需要导航栏CSS文件，以及下拉列表和响应功能的JS文件。 用法 设置Bootstrap版本 该gem需要知道您使用的是哪个Bootstrap版本，因为导航栏HTML在不同的Bootstrap版本中看起来有所不同。 如果您使用的是或 gem，那么一切都会准备就绪，因为Boostrap版本将从这些gem的版本中自动嗅探出来。 但是，请确保在rails_bootstrap_navbar中的rails_bootstrap_navbar之前包含bootstrap-sass或bootstrap gem。 如果以其他方式包含Bootstrap CSS和JS，则需要在初始化程序中显
rails-bootstrap-devise
03-31
Rails-Bootstrap-Devise样板 这是启动Rails 6应用程序/样板，您可以在其中避免添加引导程序并从头开始设计gem。 这个捷径将鼓励您直接开始主要任务。 您将在此启动Rails应用程序中找到以下项目： 使用Webpacker集成的Bootstrap 4.3，JQuery，Popper.js 使用Webpacker集成了Font Awesome 5 通过定制的引导程序表单实现会话，注册和密码的设计 实施开信刀以在本地测试电子邮件 开发设置 先决条件： PostgreSQL 邦德勒 节点（> = 11.x） 纱 bundle install yarn install 现在，您需要设置数据库。 并且您需要运行以下命令，但是在运行它们之前，您需要在其中更改pg的用户名和密码的值 config/database.yml 更改后，运行以下命令： rails db
rails-bootstrap-modal:在 Rails 中的 Bootstrap 模式中显示视图的示例
06-03
自述文件 此示例显示如何使用 JS 视图在 Rails 中的 Bootstrap 模式中显示表单。 此解决方案背后的关键思想是，您可以创建路由，而不是呈现 HTML 或将用户重定向到另一个操作，而是返回一些在客户端上执行的 JS 代码。 让我们看看显示模态的链接的代码： <%= link_to "New Contact", new_contact_path, remote: true, class: "btn btn-primary" %> 它指向new_contact_path路由，但请注意remote: true 。 这告诉 Rails 使用 AJAX 调用此路由。 ContactsController的new操作如下： class ContactsController < ApplicationController ... def new @cont
史上最全bootstrap下载安装使用教程（下载--＞安装--＞使用）
m0_59285890的博客
05-30 7507
bootstrap下载安装使用教程（下载-->安装-->使用）
Bootstrap的安装(保姆式教程)
weixin_73200795的博客
07-23 971
开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行。）的Breaking News都使用了该项目。一、首先在浏览器搜索bootstrap，然后点击。然后点击 Bootstrap v3。Bootstrap是美国。，包括NASA的MS。然后点击这个生产环境。
Bootstrap—— bootstrap的安装
qq_43201350的博客
01-09 331
Bootstrap—— bootstrap的安装
JQ-6 Bootstrap入门到实战；Bootstrap的（优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；项目实践
最新发布
qq_54075517的博客
07-25 945
Bootstrap入门到实战；Bootstrap的（优缺点、安装教程、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；小项目实践
rails引入bootstrap
weixin_30745553的博客
06-09 138
1、在Gemfile中增加gem 'bootstrap-sass', '~> 3.2.0.2'2、bundle install3、把assets/stylesheets/application.css重命名为application.scss4、在这个文件中增加： @import "bootstrap-sprockets"; @import "bootstrap"...
bootstrap 小程序_如何将Bootstrap添加到Ruby on Rails应用程序
08-14 239
bootstrap 小程序 介绍 (Introduction) If you are developing a Ruby on Rails application, you may be interested in adding styles to your project to facilitate user engagement. One way to do this is by adding...
rails 直接使用bootstrap模板
sulong507的专栏
08-26 1617
在 这里，你可以很快看到 Bootstrap 的模样了。接下来的章节里，我们将按照这个样子，设计我们的 shop。 rails new shop 好的，我们给它添加个几个 gem。 gem "therubyracer" gem "less-rails" gem "twitter-bootstrap-rails" 然后，运行 bundle install 之后，我们给出一个新的命令，
[ruby on rails]bootstrap模态框
深度的博客
01-08 351
&lt;button class="btn" data-toggle="modal" data-target="#myModal"&gt;模态框新建&lt;/button&gt; &lt;!-- Modal --&gt; &lt;div class="modal fade" id="myModal" tabindex="-1" ro
Bootstrap的安装和使用
weixin_46128831的博客
01-22 3178
1.BootStrap简介 Bootstrap是由美国Twitter公司开发的一种前端框架，用来快速开发响应式布局、移动设备优先的Web项目，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。 2. BootStrap特点 ...
java常见的日志管理工具,Logstash：Java日志文件管理工具
weixin_31138555的博客
03-22 289
Logstash Build statusTestmaster5.02.4coreLogstash is a tool for managing events and logs. You can use it to collect logs, parse them, and store them for later use (like, for searching). If you store t...
Bootstrap全版本通用安装方式【详细版】
前端路上的坎坷
07-04 1053
Bootstrap 是全球最流行的前端开源工具包，它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
Bootstrap --》Bootstrap的安装与使用
ztK63LrD的博客
09-14 2103
Bootstrap5 是 Bootstrap 的最新版本，使用了新组件、更快的样式表以及拥有更快的响应能力。Bootstrap来自 Twitter (推特)，是一个 CSS 框架，是目前最受欢迎的前端框架，可以更轻松地创建网站和 Web 应用程序用户界面。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。
怎么调节table的行间距？在rails使用了bootstrap
05-31
在 Rails 中使用 Bootstrap，你可以通过添加自定义 CSS 样式来调整表格的行间距。可以在 ```app/assets/stylesheets/custom.scss``` 文件中添加以下样式： ``` .table { border-collapse: separate; border-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值