style bootstrap attribute javascript jquery css ruby-on-rails twitter-bootstrap

javascript - attribute - tooltip html bootstrap



Rieles-Configuración Bootstrap (2)

Estoy tratando de hacer que bootstrap javascript funcione en mi aplicación rails 4.

Hice estas preguntas pero no he podido obtener ayuda.

https://stackoverflow.com/questions/33685338/rails-with-bootstrap-tabs https://stackoverflow.com/questions/33852687/rails-4-bootstrap-date-picker

Cada vez me siento más derrotado por este desafío. Es deprimente que bootstrap se describa como una herramienta simple para rieles. Me complacería pagar USD100 si alguien pudiera ayudar a resolver este problema.

Mi problema es específicamente con las funciones de javascript. Mis pestañas no funcionan. Cuando haces clic en el enlace, no pasa nada. Además, el selector de fechas no funciona (esperaba un calendario para elegir una fecha con un solo clic).

En mi archivo de gemas tengo:

gem ''sass-rails'', ''~> 5.0'' gem ''bootstrap-sass'', ''~> 3.3.5'' gem ''font-awesome-sass'', ''~> 4.4.0'' gem ''bootstrap-slider-rails'' gem ''bootstrap-datepicker-rails'' gem ''jquery-rails''

En mi application.html.erb, tengo:

<link href=''http://fonts.googleapis.com/css?family=Quicksand|Roboto:300'' rel=''stylesheet'' type=''text/css''> <link href=''http://fonts.googleapis.com/css?family=Noto+Sans'' rel=''stylesheet'' type=''text/css''> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="p:domain_verify" content="44c82789b3dcecac427e4b65123fb68d"/> <title><%= content_for?(:title) ? yield(:title) : "RE" %></title> <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Ae" %>"> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %> <%= javascript_include_tag "application", "data-turbolinks-track" => false %> <%= csrf_meta_tags %> <%= favicon_link_tag %> <script src="https://www.google.com/jsapi"></script> <script src="https://www.youtube.com/iframe_api"></script>

Turbolinks está apagado porque uso olark.

En mi carpeta de hojas de estilo, tengo archivos llamados:

application.css.scss:

*= require_framework_and_overrides.css.scss *= require bootstrap-datepicker *= require_self *= require_tree . */

Siguiendo los comentarios que se detallan a continuación, cambié este archivo para que se llamara application.scss y cambié el orden y la referencia a:

*= require_tree . *= require_self *= require framework_and_overrides.css.scss *= require bootstrap-datepicker */

framework_and_overrides.css.scss

@import "bootstrap-sprockets"; @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; @import "bootstrap-slider";

En mi carpeta javascript, tengo un archivo llamado:

aplicacion.js:

//= require jquery //= require jquery_ujs //= require underscore //= require gmaps/google //= require bootstrap-slider //= require bootstrap-sprockets //= require bootstrap-datepicker //= require_tree .

project_dates.coffee.js

$(document).on "focus", "[data-behaviour~=''datepicker'']", (e) -> - $(this).datepicker - format: "dd-mm-yyyy" - weekStart: 1 - autoclose: true

Entonces, en mi opinión, estoy tratando de usar pestañas bootstrap, de modo que al hacer clic en una pestaña aparece un parcial debajo de la barra de enlaces:

<div class="containerfluid"> <div class="row" style="margin-top:50px"> <div class="col-xs-10 col-xs-offset-1"> <ul class="nav nav-tabs nav-justified"> <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li> <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li> <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li> <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li> <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li> <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <div class="intpolmin" style="margin-top: 50px; margin-bottom: 30px"> We give meaning to other words used in these terms and policies throughout, and identify those words as having an ascribed meaning, with <em>emphasised</em> text. </div> </div> </div> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="terms"><%= render ''pages/legalpolicies/terms'' %></div> <div role="tabpanel" class="tab-pane" id="privacy"><%= render ''pages/legalpolicies/privacy'' %></div> <div role="tabpanel" class="tab-pane" id="licence"><%= render ''pages/legalpolicies/licence'' %></div> <div role="tabpanel" class="tab-pane" id="trust"><%= render ''pages/legalpolicies/trust'' %></div> <div role="tabpanel" class="tab-pane" id="reliance"><%= render ''pages/legalpolicies/reliance'' %></div> <div role="tabpanel" class="tab-pane" id="pricing"><%= render ''pages/legalpolicies/pricing'' %></div> </div> </div> </div> </div>

Nada sucede cuando haces clic en los enlaces.

En mi formulario de fechas de proyecto, tengo este campo de formulario:

<%= f.date_select :start_date, :label => "When does this project begin?", ''data-behaviour'' => ''datepicker'', order: [:day, :month, :year] %>

No hace un selector de fecha. En su lugar, son solo tres campos separados para d / m / a. Además, la etiqueta no se muestra, pero puedo solucionar ese problema.

¿Hay algo mal con mi configuración?

Cuando cambio mi application.js para eliminar:

//= require bootstrap

Luego, el js funciona de modo que cuando hace clic en uno de los enlaces de la pestaña en la parte superior, salta una larga página de texto hasta el punto donde comienza el texto relevante. Eso no es lo que quiero. Quiero hacer clic en el enlace de la pestaña y para eso ocasionar que el parcial relevante se muestre debajo de los enlaces (y todos los demás parciales no se representen).

No hay cambios en el problema del selector de fecha que resultan de este cambio en application.js

Cuando intento agregar:

Bundler.require(:default, Rails.env)

a mi config / application.rb (según este post Javascript de Bootstrap-sass gem que no funciona en Rails 4 )

No obtengo un resultado diferente a los problemas descritos anteriormente.

Cuando intento agregar

//= require bootstrap-sprockets

En mi application.js (después de jquery), el js deja de funcionar, de modo que cuando hago clic en el enlace del menú de pestañas, no sucede nada.

Soy consciente de que la guía del usuario para https://github.com/twbs/bootstrap-sass dice:

bootstrap-sprockets and bootstrap should not both be included in application.js.

Por esa razón, quité bootstrap de mi application.js.

También soy consciente de que la guía del usuario para esa gema dice:

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

Todavía tengo esto en mi aplicación.css.scss:

*= require_framework_and_overrides.css.scss *= require bootstrap-datepicker *= require_self *= require_tree . */

Leí la documentación de la gema en el sentido de que estoy haciendo algo mal al mantener estos archivos en mi css, pero la documentación de la gema no le dice qué usar en su lugar.

Dice:

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

¿Cómo haces esto?

El archivo de gema completo se copia a continuación:

source ''https://rubygems.org'' # ------------------ Bundle edge Rails instead: gem ''rails'', github: ''rails/rails'' gem ''rails'', ''4.2.4'' # ------------------ Use postgresql as the database for Active Record gem ''pg'' # ------------------ Use SCSS for stylesheets gem ''sass-rails'', ''~> 5.0'' gem ''bootstrap-sass'', ''~> 3.3.5'' gem ''font-awesome-sass'', ''~> 4.4.0'' gem ''bootstrap-slider-rails'' gem ''bootstrap-datepicker-rails'' # ------------------ Use Uglifier as compressor for JavaScript assets gem ''uglifier'', ''>= 1.3.0'' # ------------------ Use CoffeeScript for .coffee assets and views gem ''coffee-rails'', ''~> 4.1.0'' # ------------------ See https://github.com/rails/execjs#readme for more supported runtimes gem ''therubyracer'', platforms: :ruby # ------------------ Use jquery as the JavaScript library gem ''jquery-rails'' # ------------------ Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks # gem ''turbolinks'' # ------------------ Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem ''jbuilder'', ''~> 2.0'' # ------------------ bundle exec rake doc:rails generates the API under doc/api. gem ''sdoc'', ''~> 0.4.0'', group: :doc # ------------------ Use ActiveModel has_secure_password gem ''bcrypt'', ''~> 3.1.7'' # ------------------ Use Unicorn as the app server # gem ''unicorn'' # ------------------ Use Capistrano for deployment # gem ''capistrano-rails'', group: :development # ----------- USERS # ------------------ authentication gem ''devise'', ''3.4.1'' gem ''devise_zxcvbn'' gem ''omniauth'' gem ''omniauth-oauth2'', ''1.3.1'' gem ''omniauth-google-oauth2'' gem ''omniauth-facebook'' gem ''omniauth-twitter'' gem ''omniauth-linkedin-oauth2'' gem ''google-api-client'', require: ''google/api_client'' # gem ''oauth2'' # ------------------ authorisation gem ''pundit'' # ------------------ user roles # ------------------ messaging # ------------------ money gem ''money-rails'' # ----------- CONTENT gem ''state_machine'' gem ''acts_as_approvable'' # ------------------ file uploads gem ''carrierwave'' gem ''mini_magick'' gem ''simple_form'' # ------------------ video gem ''yt'', ''~> 0.25.5'' gem ''vimeo'' # ------------------ organisation gem ''acts-as-taggable-on'', ''~> 3.4'' # ------------------ search # ----------- OTHER # ------------------ security gem ''figaro'' # ------------------ performance gem ''rails-observers'' gem ''high_voltage'', ''~> 2.4.0'' # ------------------ location gem ''geocoder'' gem ''gmaps4rails'' gem ''underscore-rails'' gem ''country_select'' group :development, :test do # Call ''byebug'' anywhere in the code to stop execution and get a debugger console gem ''byebug'' end group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem ''web-console'', ''~> 2.0'' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem ''spring'' end group :production do gem "rails_12factor" end ruby "2.2.2"

Viendo este video - https://gorails.com/episodes/styling-with-bootstrap-sass

La configuración parece muy simple, pero este tutorial no corrige el archivo para eliminar las referencias que se requieren como lo sugiere la documentación de la gema (pero no lo he hecho), pero este tutorial aún funciona para que funcione bootstrap. ¿Hay ALGO que alguien pueda ver que pueda intentar? A punto...

Como puede ver, he estado intentando esto durante más de un año. He estado en reuniones mensuales, mentores de código pagado y contratistas contratados que no han podido ayudar. Esperando un milagro en este tablero. Bootstrap Sass con rieles 4

TRATANDO LA SOLUCIÓN DE RESCATE ABAJO:

Entonces, ahora tengo:

hojas de estilo de la siguiente manera:

application.css *= require_tree . *= require_self */ custom.css.scss @import "bootstrap-sprockets"; @import "bootstrap"; framework_and_overrides.css.scss: @import "font-awesome-sprockets"; @import "font-awesome"; @import "bootstrap-slider";

archivos javascript de la siguiente manera:

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

application.html.erb:

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => false %> <%= javascript_include_tag "application", media: ''all'', "data-turbolinks-track" => false %>

archivo gem

gem ''sass-rails'', ''~> 5.0'' gem ''bootstrap-sass'', ''~> 3.3.5.1'' gem ''font-awesome-sass'', ''~> 4.4.0'' gem ''bootstrap-slider-rails'' gem ''bootstrap-datepicker-rails''

Cuando guardo todo esto y completo los pasos sugeridos, no hay cambios a los anteriores. Al hacer clic en un enlace en la pestaña de enlaces en la parte superior, el cuadro pequeño en la parte inferior de la pantalla dice ''ir a # [nombre de la pestaña del enlace] en esta página, pero no sucede nada.

Encontré el mismo problema que tú y encontré una solución (excavando en la web profunda) que funcionó para mí. Intente agregar los requisitos después de la línea require_tree . en el archivo .css y en el archivo .js solo el selector de fecha que usa; como a continuación:

aplicacion.css

... *= require_tree . *= require_self *= require bootstrap *= require bootstrap-datepicker */

aplicacion.js

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

Está relacionado con el flujo de activos de Ruby on Rails, puede ir más allá sobre este tema en esta página http://guides.rubyonrails.org/asset_pipeline.html , pero primero intente cambiar el orden de las líneas.

Estás en el infierno de la configuración, y he construido un producto de trabajo mínimo para sacarte de allí. Para lograr esto, abordamos sus problemas en orden de aparición y no intentamos resolverlos en paralelo. Esta respuesta se enfoca en tu primera pregunta y probablemente resuelve las otras.

A continuación la copia del archivo Léame del proyecto. En caso de que necesite acceso al producto, hágamelo saber.

Leer

Esta es una aplicación de demostración para ayudar a user "user2860931" con los problemas mencionados aquí.

Las preguntas se enumeran en orden cronológico:

[Q1] Noviembre, 13 Rieles con lengüetas de Bootstrap

[P2] Noviembre, 22 Rieles 4 - Selector de fecha Bootstrap

[Q3] Noviembre, 24 Rieles - Configuración Bootstrap

Descripción del problema

Se han realizado muchos intentos de configuración y un entorno de desarrollo subóptimo probablemente interrumpió las convenciones de nomenclatura de los rieles al agregar extensiones de archivo.

Versiones utilizadas

Rieles 4.2.5

Pasos para crear esta aplicación por ti mismo

Primer chequeo para una versión apropiada de los carriles

$ rails --version

  1. Asegúrese de que el entorno de desarrollo (IDE) no agregue las extensiones de archivo por sí mismo

  2. Creando una nueva aplicación de rieles

    $ rails new rescue

  3. Localice el archivo Gem de la aplicación creada en 1. y comente la entrada de la gema turbolinks. Quite los enlaces explicativos para mayor claridad visual.

  4. Agregue las siguientes líneas a su Gemfile (es posible que desee arreglar las gemas de una versión en particular para evitar que una aplicación deje de funcionar con una actualización no planificada, pero este es otro problema)

    gem ''bootstrap-sass'' #, ''3.3.5.1''

  5. correr

    $ bundle exec bundle update $ bundle exec bundle install

  6. Cree la aplicación de archivo / asset / stylesheets / custom.css.scss y agregue las siguientes líneas:

    @import "bootstrap-sprockets"; @import "bootstrap";

  7. Agregue la siguiente línea a app / asset / javascripts / application.js

    //= require bootstrap

    IMPORTANTE: esta línea debe seguir las líneas de jquery y jquery-ujs y antes de la directiva require_tree para que el archivo resultante tenga el siguiente aspecto:

    //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . NOTA: Hemos eliminado la línea de turbolinks, para reflejar la configuración del sistema de producción del usuario "user2860931" ().

  8. Después de guardar todos los archivos editados, verifique si el entorno de desarrollo ha alterado las extensiones de archivo (solo para estar seguro esta vez)

    . ├── app │   ├── assets │   │   ├── images │   │   ├── javascripts │   │   │   └──application.js  
    │   │   └── stylesheets │   │   ├── application.css │   │   └── custom.css.scss

  9. Generar un controlador mínimo junto con la acción y la vista relacionada

    $ rails generate controller planets index

  10. Iniciar el servidor

    $ rails s

  11. Visita en tu navegador

    http://localhost:3000/planets/index

  12. Último paso para eliminar completamente los turbolinks.

    1. Ver el código fuente HTML del sitio mencionado en 11.

    2. Desde el archivo app / views / layouts / application.html.erb, elimine todos los atributos de data-turbolinks-track para que el código ERB se vea como:

      <%= stylesheet_link_tag ''application'', media: ''all'' %> <%= javascript_include_tag ''application'' %>

    3. Repita el paso 1. y note la diferencia

  13. Visite el archivo app / views / planets / index.html.erb y sustitúyalo por su HTML como se indica en [Q1]

  14. Esta configuración muestra sus parciales bajo el panel de pestañas correcto. Tenga en cuenta que está trabajando en el entorno de desarrollo de Rails. Una llamada a

    $ rake assets:clean $ rake assets:precompile

    podría ser necesario para ver los cambios una vez que implemente su proyecto principal (no debería ser necesario en el modo de desarrollo de Rails).

    Sugerencia: utilice archivos de datos simulados como argumentos para la función de procesamiento.

    app │   └── views 
    │   │  │   └── planets │   ├── _dummy00.html.erb │   ├── _dummy01.html.erb │   ├── _dummy02.html.erb │   ├── _dummy03.html.erb │   ├── _dummy04.html.erb │   ├── _dummy05.html.erb

y usa llamadas para render ''planets/dummy05'' en su HTML de Q1. Asegúrese de que cada archivo ficticio contenga datos ligeramente diferentes, para poder verificar que las pestañas funcionen.

El resultado de la maqueta proporciona pestañas a través de bootstrap y se ve así .

Las pestañas están funcionando como se espera .

Al proporcionarle el producto de trabajo mínimo, debe estar habilitado para llevar su configuración a un estado de trabajo.

Después de toda la preparación, agregue un selector de fechas simplemente siguiendo los trabajos oficiales de documentación, que responden a la P2 :

Fuentes utilizadas para proporcionar esta respuesta

https://www.railstutorial.org/ por Michael Hartl

http://getbootstrap.com/components/#nav

http://getbootstrap.com/javascript/#tabs

http://getbootstrap.com/javascript/#tabs-usage

http://guides.rubyonrails.org/asset_pipeline.html