Rails mit Bootstrap-Registerkarten

9

Ich habe eine Rails 4 App.

Ich versuche Bootstrap Tabs zu integrieren.

Wenn Sie die Bootstrap-Dokumente lesen, bedeutet dies, dass eine Methode js nicht involviert ist. Ich habe jeden der Ansätze in den Dokumenten ausprobiert, kann aber keine von ihnen in meiner App verwenden.

Mein aktueller Versuch ist:

%Vor%

Der Effekt ist, mir eine Tab-Leiste am oberen Rand der Seite zu geben. Die Registerkarten sind anklickbar.

Allerdings wird der gesamte Inhalt in den einzelnen Inhaltsbereichen der Registerkarten nur in einer langen Textseite angezeigt. Die Links funktionieren nicht.

Kann jemand sehen, was benötigt wird, um dies zum Laufen zu bringen?

Ich habe diese Aussage in der Dokumentation gelesen:

Sie können eine Tab- oder Pill-Navigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="tab" oder data-toggle="pill" für ein Element angeben.

Ich verstehe das, dass keine js erforderlich ist.

Jedenfalls habe ich versucht, eine privacy.js-Datei in meinem Javascripts-Ordner zu erstellen und folgendes hinzuzufügen:

%Vor%

Das hat nichts gemacht.

Ich habe versucht, es in meine application.js-Datei zu verschieben. Kein Unterschied. Wird mehr benötigt? Es ist merkwürdig für mich, dass dies irgendetwas bewirkt, da ich im HTML nichts #myTabs habe. Gibt es noch etwas anderes, das benötigt wird, um dies zum Laufen zu bringen?

Gem Datei hat:

%Vor%

Stylesheets haben eine Datei namens: framework_and_overrides.css.css, die folgendes enthält:

%Vor%

Der Javascripts-Ordner hat eine Datei namens application.js mit folgendem Inhalt:

%Vor%

Also - nach dem Hinweis auf das Bootstrap-Sass-Juwel-Setup (für Ruby on Rails habe ich Änderungen an meinen Stylesheets und js-Dateien vorgenommen.

Genauer gesagt sagt dieses Juwel:

%Vor%

Ich habe den Namen des Anwendungs-Stylesheets von application.css.scss in application.scss geändert.

Ich habe den Inhalt dieser Datei folgendermaßen geändert:

%Vor%

Ich habe den Inhalt meiner Datei framework_and_overrides.css.scss so geändert, dass er Folgendes enthält:

%Vor%

Meine application.js Datei hat:

%Vor%

Dies hat keine positive Auswirkung. Es entfernt all das Styling auf meinen Seiten, entfernt das Bootstrap-Styling und bringt alles durcheinander. Es verbindet die Tab-Links nicht mit dem Tab-Inhalt.

Ich stecke fest - ich versuche wirklich zu verstehen, wie Bootstrap Tabs in Rails 4 zu verwenden sind. Jeder Rat würde sehr geschätzt werden.

Wenn ich es zurückstelle, wird zumindest das Styling reflektiert, aber die js Tabs funktionieren nicht (in jedem Fall).

EIN ANDERER VERSUCH:

Wenn ich den Import-Bootstrap am Anfang meiner application.js hinzufüge:

%Vor%

Die Registerkarten am oberen Rand der Seite in diesem Beispiel funktionieren so, dass die Seite bis zum Anfang des entsprechenden Textregisters heruntergesprungen wird. Das ist nicht was ich will. Ich möchte, dass der Teiltext, der diesen Text enthält, oben auf der Seite angezeigt wird (und der Text in jedem der anderen Teiltags ausgeblendet wird) - wie im Bootstrap-Beispiel für Tabs gezeigt.

    
Mel 13.11.2015, 03:13
quelle

2 Antworten

2

Ich habe Folgendes in Bootstrap DOC gelesen:

  

Die Verwendung von Navigationsfeldern für Registerkarten erfordert JavaScript-Registerkarten für Registerkarten   Bei tabellierbaren Bereichen müssen Sie das JavaScript-Plugin für Tabs verwenden. Das   Markup erfordert auch zusätzliche Rollen- und ARIA-Attribute - siehe   Beispielmarkierung des Plugins für weitere Details.

Sie müssen wahrscheinlich zu application.js hinzufügen:

%Vor%

Einschließlich:

%Vor%

ist nicht genug:

  

bootstrap-sprockets bietet individuelle Bootstrap-Javascript-Dateien   (zB alert.js oder dropdown.js), während bootstrap a   verkettete Datei, die alle Bootstrap Javascripts enthält

    
bo-oz 18.11.2015 15:49
quelle
1

Hier ist eine Möglichkeit mit einem zusätzlichen Styling, damit die Tabs so aussehen, wie Sie es möchten.

Damit die Rails-Links funktionieren, müssen Sie das Javascript ändern, das anzeigt, dass Inhalte ausgeblendet werden, um entweder Turbolinks oder ähnliches zu verwenden.

%Vor% %Vor% %Vor%
    
Abs 20.11.2015 02:47
quelle