Интеграция версии LESS версии Bootstrap-Material-Design to Rails

Я использую этот драгоценный камень bootstrap-material-design, который является sass версией библиотеки https://github.com/FezVrasta/bootstrap-material-design, но недавно я заметил, что версия sass больше не поддерживается.Интеграция версии LESS версии Bootstrap-Material-Design to Rails

Задача Я столкнулся с этим камнем, так как он не превращает кнопки и флэш-сообщения в материал в стиле.

Одно решение как предложено здесь: https://github.com/FezVrasta/bootstrap-material-design/issues/535 - использовать версию LESS, но я не знаю, как интегрировать версию LESS этой библиотеки. Кто-нибудь уже это сделал?

UPDATE:

В случае, если кто ищет, чтобы добавить Bootstrap-Material-Design на свой сайт без использования каких-либо рамок или на стороне сервера язык, как Ruby, PHP и т.д. ..., только с HTML5, CSS3 и JS. они могут следовать этим инструкциям ниже:

Для установки и загрузки начальной загрузки-материал FOLDER

bower install bootstrap-material-design

Ссылки начальной загрузки CSS и материал CSS уменьшенная файл под головой тегом

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-material-design/dist/css/material-fullpalette.min.css">

Ссылка Файлы Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script> 
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>

Наконец Вы должны инициализировать некоторые компонент материала с помощью этого сценария в нижней части вашего тела

<script> 
$(document).ready(function() { 
    $.material.init(); 
}); 
</script>

источник

2015-03-30 Abhinay

Возможно, вы захотите проверить [Rails Assets] (https://rails-assets.org/), который имеет драгоценный камень 'rails-assets-bootstrap-material-design' из соответствующего Bower пакет. Это может сделать вещи проще. А может и нет. В любом случае стоит попробовать. –

, который выглядит интересным, я обязательно посмотрю. спасибо :) – Abhinay

Сначала установить Rails, см: http://guides.rubyonrails.org/getting_started.html. Тогда вы можете создать новое приложение Rails, выполнив следующую команду в консоли:

>> rails new material

Эта команда создаст новый каталог material, перейдите в этот каталог (>> cd material). Теперь откройте Gemfile и удалите узелок Sass и на Less пучка (ы):

#gem 'sass-rails', '~> 5.0' 
gem 'less-rails' # Less 
gem 'therubyracer' # Ruby

Затем запустите bundle install снова. Теперь перейдите к вашему public каталогу (>> cd public) и выполните следующую команду:

>> bower install bootstrap-material-design

Теперь вы можете создать контроллер под названием «Добро пожаловать» с действием под названием «Индекс», выполнив следующую команду:

>> bin/rails generate controller welcome index

Предыдущая команда создает среди других файл app/views/welcome/index.html.erb.Откройте файл app/views/welcome/index.html.erb и выписывать содержимое так, как показано ниже в него (по https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test.html):

<!-- Your site --> 
<h1>You can add your site here.</h1> 
<h2>To ensure that material-design theme is working, check out the buttons below.</h2> 
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3> 
<p class="bs-component"> 
<a href="javascript:void(0)" class="btn btn-default">Default</a> 
<a href="javascript:void(0)" class="btn btn-primary">Primary</a> 
<a href="javascript:void(0)" class="btn btn-success">Success</a> 
<a href="javascript:void(0)" class="btn btn-info">Info</a> 
<a href="javascript:void(0)" class="btn btn-warning">Warning</a> 
<a href="javascript:void(0)" class="btn btn-danger">Danger</a> 
<a href="javascript:void(0)" class="btn btn-link">Link</a> 
</p> 
<!-- Your site ends -->

И после этого убедитесь, что содержание ./app/views/layouts/application.html.erb файла выглядеть, как показано ниже:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Material</title> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 

<%= yield %> 


<!-- Your site ends --> 
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script> 
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script> 
<script> 
$(document).ready(function() { 
// This command is used to initialize some elements and make them work properly 
$.material.init(); 
}); 
</script> 


</body> 
</html>

Наконец переименовать app/assets/stylesheets/application.css в app/assets/stylesheets/application.css.less и записать следующее содержание в ней:

@import "../../../public/bower_components/bootstrap-material-design/less/material-fullpalette.less"; 
@color: red; 
h1 { 
color: @color; 
}

Теперь вы можете запустить >> bin/rails server и открыть http://localhost:3000/welcome/index в своем браузере. Результат должен теперь выглядеть так, как показано на рисунке ниже:

enter image description here

источник

2015-03-30 11:35:46

Awesome, спасибо :) – Abhinay

Его не работает на героку, я что-то упускаю? – Abhinay

Для меня работает с: @import "/bower_components/bootstrap-material-design/less/material-fullpalette.less"; Компонент bower не был скопирован в общую папку. Это нормально? – halbano

Если вы собираетесь использовать this gem by Aufree, то это на самом деле довольно просто после документации.

Добавить камень в файл драгоценных камней, а также добавить меньше рельсов

gem 'less-rails' 

gem 'bootstrap-material-design'

Тогда расслоение.

Теперь перейдите к файлу application.js и добавить

//= require bootstrap-material-design

, а затем перейти к файлу application.css и добавить

*= require bootstrap-material-design

после этого перезапустите сервер. Должно быть хорошо, чтобы пойти

источник

2016-04-18 18:22:07

Интеграция версии LESS версии Bootstrap-Material-Design to Rails

ответ

Смежные вопросы