복붙노트

[RUBY-ON-RAILS] 어떻게 레일 응용 프로그램으로 랩 부트 스트랩 테마를 통합하는?

RUBY-ON-RAILS

어떻게 레일 응용 프로그램으로 랩 부트 스트랩 테마를 통합하는?

나는 wrapbootstrap에서 트위터 부트 스트랩 테마를 구입했다. 나는 이미 기능 레일 응용 프로그램이 있습니다. 지금, 나는 내 응용 프로그램으로 부트 스트랩 테마를 통합하여 내 응용 프로그램을 설계합니다. 나는이 새로운 오전과 나는 그것을 수행하는 방법 아무 생각이 없습니다. 이 많은 연구를 수행 한 후, 나는이 문제에 대해 단지 아주 약간의 토론을 발견했다. 레일 앱에 구현 WrapBootstrap 테마 : 예로서이 게시물을 발견

그러나, 나는 주제에서 자산을 내 응용 프로그램에 적용되는 방법을 완전히 확실하지 않다. 나는 테마의 해당 폴더에서 내 프로젝트의 응용 프로그램 / 자산 / 이미지, 응용 프로그램 / 자산 / 자바 스크립트 및 응용 프로그램 / 자산 / 스타일 폴더 아래의 모든 자산을 복사 한. 내가 로컬 내 응용 프로그램을 실행하려고 할 때 다음, 나는 몇 가지 오류가 발생했습니다. 이 작업을 시작 그 후 나는 나의 application.css 파일을 삭제. 테마 존재가 아직 적용에서, 나는 어떤 디자인을 볼 수 없습니다. 내 레일 응용 프로그램에이 테마 작품을 만들기 위해 무엇을해야합니까?

해결법

  1. ==============================

    1.먼저이 스크린 캐스트를 확인 :

    먼저이 스크린 캐스트를 확인 :

    http://railscasts.com/episodes/328-twitter-bootstrap-basics

    그때는 부트 스트랩-말대꾸 같은 부트 스트랩 보석을 추가 한 후 매니페스트에 추가하여 보석을 통해 JS 파일을 추가,이 같은 :

    //= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

    그때 난 당신이 wrapbootstrap에서 구입하는 CSS 파일을 가져와 자산에 배치 할 / 스타일 시트는 폴더,이 전에 그것을 한 필자 어떻게 앱에 필요한 마크 업 및 clases를 추가합니다.

    그것이 도움이되기를 바랍니다

    편집하다:

    마크 업 :

    다운로드 한 템플릿을 확인, 예를 들어 네비게이션 바에으로 시작할 수 있습니다

    템플릿 코드 :

    <header>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <a 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>
            </a>
            <div class="container">
                <a class="brand" href="index.html">Gaia Business</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="service.html">Service</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                          <ul id="dropdown-menu" class="dropdown-menu">
                            <li><a href="#">Dropdown 1</a></li>
                            <li><a href="#">Dropdown 2</a></li>
                            <li><a href="#">Dropdown 3</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">Nav header</li>
                            <li><a href="#">Dropdown 4</a></li>
                            <li><a href="#">Dropdown 5</a></li>
                          </ul>
                        </li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!--/.container-->
        </div><!-- /navbar-inner -->
    </div>
</header><!--/header-->

    이제 앱의 모든보기에서 네비게이션 바 쇼, 당신은 / 레이아웃에서이 같은 application.html.erb 무언가를 언급해야하는 경우, 앱에 자신을 배치해야합니다 :

    <!DOCTYPE html>
<html>
<head>
  <title>Golden Green Chlorella</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>

</head>
<body>

<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>

    마지막으로, 당신의 네비게이션 바이 부분 할

    _navbar.html.erb :

    <header>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar glyph"></span>
                <span class="icon-bar glyph"></span>
                <span class="icon-bar glyph"></span>
            </a>
            <div class="container">
                <%= link_to "Your app", root_path, :class => "brand" %> 
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
                        <li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>  
                        <li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>                       
                        <li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>           
                        <li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>

                        <!-- <li class="active"><a href="index.html">Home</a></li> -->
                    </ul>
                    <ul class="nav pull-right">
                        <li><%= link_to "English", static_english_path%></li>
                        <li><%= link_to "Español", static_spanish_path%></li>
                    </ul> 
                </div><!-- /.nav-collapse -->
            </div><!--/.container-->
        </div><!-- /navbar-inner -->
    </div>
</header><!--/header-->

    전용 네비게이션 바에을 위해, 이제 나머지를 할 필요가 있었다 즉, 모든 앱이 아니 쉬운 일이, 당신이 할 수있는 마크 업 템플릿 쇼를 추가 할 수 있지만 그게 전부는 방법을 수행.

  2. ==============================

    2.확인 트위터 부트 스트랩을 설치하는 동안 아래 Gemfile에 다음과 보석을 추가해야하는지 확인 "그룹 : 자산"

    확인 트위터 부트 스트랩을 설치하는 동안 아래 Gemfile에 다음과 보석을 추가해야하는지 확인 "그룹 : 자산"

    gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

    다음 번들 명령을 실행합니다.

    이제 테마 "file_name.css은"U 방금 다운로드 APP-> assests-> 스타일 시트에서 "스타일"폴더에 추가 한 것을 (FILE_NAME은 하나가 될 수 있음)

    다음 같은 폴더에 application.css 파일을 엽니 다 거기 당신은 볼 것이다

    *= require_tree.

    이 라인을 교체

    *= require "file_name.css"

    참고 : 음주 자산을 다시 컴파일하거나 단순히 TMP / 캐시 폴더의 내용을 삭제하는 것을 잊지.

    저장하고 서버를 재부팅합니다. 그것은 당신의 새로운 테마를 적용합니다.

    3. from https://stackoverflow.com/questions/15650627/how-to-integrate-a-wrap-bootstrap-theme-into-an-rails-application by cc-by-sa and MIT license

'RUBY-ON-RAILS' 카테고리의 다른 글

[RUBY-ON-RAILS] 레일에서 PDF를 생성  (0) 2020.02.28
[RUBY-ON-RAILS] 어떻게 레일이 보석으로 헬퍼를 볼 수 추출합니까?  (0) 2020.02.28
[RUBY-ON-RAILS] redirect_to하고 교환 렌더링?  (0) 2020.02.28
[RUBY-ON-RAILS] 어떻게 양식 레일의 드롭 다운 <선택> 필드가하는?  (0) 2020.02.28
[RUBY-ON-RAILS] 데이터베이스 어댑터에 대한 지정된 'mysql2',하지만 보석이로드되지 않습니다 보석 :: LoadError - 4 레일  (0) 2020.02.28
,

티스토리툴바