个人中心
gpt4 book ai didi

html - rails 4 : unable to import bootstrap theme into rails

转载 作者：行者123 更新时间：2023-11-28 09:27:56 25 4
gpt4 key购买 nike

尝试将名为 landon 的 Bootstrap 主题导入我的 Rails 应用程序，但无法使 CSS 文件正常工作。安装了一个 bootstrap gem (bootstrap-sass 3.1.1.1) 创建了一个 css.scss
& 添加行 @import 'bootstrap';

将 html 代码复制并粘贴到 home.html.erb 中，所以当我运行网络应用程序时，我得到的文本很酷

所以为了风格我有 2 个文件 main.css 和 bootstrap.css 文件不确定我是否需要复制 bootstrap.css 文件，因为我有 Bootstrap gem。

所以复制了一个main.css到css.scss文件

还添加了//= require bootstrap to the javascript file

home.html.erb

<body>
    <div class="preloader"></div>

    <! -- ******************** MASTHEAD SECTION ******************** -->    
    <main id="top" class="masthead" role="main">
        <div class="container">
            <div class="logo"> 
                    <!-- <a href="index.html#"><img src="images/logo.png" alt="logo"></a> -->
                    <a href="index.html#"></a>
            </div>

            <h1>Helping <strong>Mum's</strong><br>
            make better choices with their <strong>kids</strong></h1>

            <div class="row">
                <div class="col-md-6 col-sm-12 col-md-offset-3 subscribe">
                    <div class="indicates-required" style="display:none;"><span class="asterisk">*</span> indicates required</div>
                    <form action="//ubiquate.us6.list-manage.com/subscribe/post?u=bb0f5fdb70a640208cb0ecaa8&amp;id=16a7a49314" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <!-- <form class="form-horizontal" role="form" action="subscribe.php" id="subscribeForm" method="POST"> -->
                        <div class="form-group">
                            <div class="col-md-7 col-sm-6 col-sm-offset-1 col-md-offset-0">
                                <input class="form-control input-md required email" value="" name="EMAIL" type="email" id="address mce-EMAIL" placeholder="Enter your email" data-validate="validate(required, email)" required="required">
                            </div>
                                <div id="mce-responses" class="clear">
                                    <div class="response" id="mce-error-response" style="display:none"></div>
                                    <div class="response" id="mce-success-response" style="display:none"></div>
                                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div class="col-md-5 col-sm-4">
                                <div style="position: absolute; left: -5000px;"><input type="text" name="b_bb0f5fdb70a640208cb0ecaa8_16a7a49314" tabindex="-1" value=""></div>
                                <div class="clear"><button type="submit" id="mc-embedded-subscribe" class="btn btn-success btn-lg">GET EARLY ACCESS</button>
                            </div>
                        </div>
                    </form>
                    <span id="result" class="alertMsg"></span> </div>
                </div>

                <a href="index.html#explore" class="scrollto">
                <p>SCROLL DOWN TO EXPLORE</p>
                <p class="scrollto--arrow"><img src="images/scroll_down.png" alt="scroll down arrow"></p>
                </a>
        </div><! --/container -->
    </main><! --/main -->


        <! -- ******************** TESTIMONIALS SECTION ******************** -->     
        <div class="highlight testimonials">
            <div class="container">
                <div class="section-title">
                    <h2>What our customers said</h2>
                    <h4>Don't take our word. See our testimonials </h4>
                </div>

                <section class="row breath">
                    <div class="col-md-6">
                        <div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
                        <div class="clientblock"> 
                            <img src="images/customer-img-1.jpg" alt=".">
                            <p><strong>John Doe</strong> <br>
                                Founder of <a href="index.html#">Blacktie.co</a>
                            </p>
                        </div>
                    </div><! --/col-md-6 -->

                    <div class="col-md-6">
                        <div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
                        <div class="clientblock"> 
                            <img src="images/customer-img-2.jpg" alt=".">
                            <p><strong>Richard Sommer</strong> <br>
                                CEO of <a href="index.html#">Blacktie.co</a>
                            </p>
                        </div>
                    </div><! --/col-md-6 -->
                </section><! --/section -->

            </div><! --/container -->
        </div><! --/highlight Testimonials -->


        <! -- ******************** FOOTER ******************** -->    
        <main class="footercta" role="main">
            <div class="container">
                <h1>The Most Simple & <strong>Powerful Way</strong> <br>
                    to <strong>launch</strong> your product</h1>

                <div class="row">
                    <div class="col-md-12 breath text-center"> 
                        <a href="index.html#top" class="btn btn-success btn-lg gototop">GET EARLY ACCESS</a> 
                    </div>
                </div>
            </div><! --/container -->
        </main><! --/main -->

        <div class="container">
            <section class="row breath">
                <div class="col-md-12 footerlinks">
                    <p>&copy; 2014 FoodBuddy. All Rights Reserved</p>
                </div>
            </section><! --/section -->
        </div><! --/container -->




<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/easing.js"></script>
<script src="js/nicescroll.js"></script>

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
</script>


<script>


 $(function() {
    $('.scrollto, .gototop').bind('click',function(event){
         var $anchor = $(this);
         $('html, body').stop().animate({
         scrollTop: $($anchor.attr('href')).offset().top
          }, 1500,'easeInOutExpo');
     event.preventDefault();
      });
  });


</script>

</body>

最佳答案

如此处所述https://github.com/twbs/bootstrap-sass , 要实现 Bootstrap 主题，您必须像这样包含它:@import "bootstrap/theme";对于位于此处的主题 ./bootstrap/_theme.scss。不确定，因为我不知道您的设置，但您可以试一试。

关于html - rails 4 : unable to import bootstrap theme into rails，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25826368/

25 4 0
文章推荐： css - 如何使 CSS 按钮可点击
文章推荐： javascript - 缩放滚动页面
文章推荐： ios - 在子类中更改 subview 类
文章推荐： iOS 9 UIInputViewController dismissKeyboard
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com