Bootstrap verwenden

user1 · 22. April 2020

Moin,

Ich möchte gerne meine Webseite mit Bootstrap gestalten, kenne mich damit aber noch nicht aus.

Habe deshalb mal ein Buch gekauft und das mal runtergeladen.

Nun meine Fragen:

Der Ordner enthält folgende Elemente:

Code: bootstrap-4.4.1

https://pastebin.com/b1mmLjEJ

Wenn ich das Youtube-Video

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

ansehe, hat dieser nur den "dist"-Ordner und macht einfach den Link zur css + javascriptdatei..

Wofür ist also der ganze Rest?

Muss ich damit irgendwas machen oder kann ich das einfach ignorieren/löschen?

z.B. babelrc.js, eslintrc.json, die Tonnen an scss-Dateien .... den build und nuget-Ordner usw?

Mich verwirrt das gerade bisschen

Sempervivum · 22. April 2020

Bootstrap für das Layout ist heute überflüssig, denn es gibt Grid und Flex.

basti1012 · 22. April 2020

Die ganzen Datein haben meißtens ein sinn.

Bootstrap alleine brauch das nicht alles,aber wenn man zb ein Farbauswahl haben möchte wird meistens eine extra Css und noch eine Js Datei eingebunden.

Kann das sein das du bei den Download eine Demo.html und index.html dabei hast ?

Da sind Demos drinne oder beispiele.

Ich habe das noch nicht runtergeladen , aber normalerweiße haben fast alle Datein eine verwendung , auch wenn es nur für sinnlose Demo Buttons ,Alerts oder sonst was ist .

user1 · 22. April 2020

Naja, ich habe zusätzlich ein Template für Bootstrap gekauft, welches ein TEIL von meinem Vorhaben abdeckt. Dort möchte ich ein teil reinpflegen...

(Um Grid und Flex werde ich (aufgrund anderen Webseiten) nicht drum rum kommen )

Bei diesem Template gibt es natürlich auch eine Dokumentation:

Zitat

Your download will include two folders: dist and source. The dist folder includes the generated html and asset files that you should not edit ideally. These files are meant for production environment.

To edit the template you would need to edit files inside the source folder.

Inside the source folder you will find a set of files and folders. Most of the files have a .slim extension. These are the files that generate html files in the dist folder. Don't get surprised with a .slim file extension. It is a very powerful and popular template engine language called Slim Lang, you can read more about it by clicking here.

We used CodeKit app to compile .slim and .scss files, but you can use any scss compiler that you like. All the scss source files are located in the source > scss folder.

There is a folder source/scss/bootstrap-override, it has different scss files that override default Bootstrap files. Most important file there is a _bootstrap.scss which is a custom version of the bootstrap.scss file that comes originally with bootstrap.

We are using a custom (pretty much duplicated) version so that we can comment out some parts of the bootstrap that we are not going to use. You can comment back those lines. As you can see on a screenshot above some lines are commented out.

Another important file is located in source/scss/bootstrap-override/ folder, called _variables.scss. It has all the variables from the original bootstrap file, this way we can always update bootstrap to the latest verison and keep our custom changes to bootstrap variables. If you need to change bootstrap variables - you have to change them in this file.

Our template has it's own variables as well. They are located in source/scss/_theme-variables.scss file.

Responsive Styles are located in source/scss/_responsive.scss file.

Alles anzeigen

html-seminar.de/woltlab/attachment/2359/

Ich nutze "VSCode" um zu programmieren und kenne mich überhaupt nicht mit "slim"-Dateien aus... wie geht das denn nun?

Kann ich diese in ".html" umwandeln oder sowas? ....

Hoffe mir kann jemand weiterhelfen ..

Bootstrap verwenden

Jetzt mitmachen!

Teilen