Bootstrap 4 Files Download
Aura Maire
i just installed Boostrap Studio. I already have a website which i built with bootstrap (a folder with HTML-, CSS- and JS-files). How can I import that website into Bootstrap Studio to keep working with the website in the programm?
1) open a browser window for you files2) select all your html files for pages and drag into bootstrap studio and they will sit in the pages folder3) select all your css file and drag them in and the same will happen, you will then need to reorder the css if needs be4) select all your js files and then drag in all all with sit in the js folder
To answer your question, yes. Bootstrap Studio does modify divs and classes, BUT this is only when using the Custom Code element which lets you insert your own code. Custom Code is cleaned up to be shown in the editor if it is not valid, and converting Custom Code into elements will also sanitise the HTML. however, Bootstrap Studio does not create new files if you are importing HTML or using Custom Code.
So if I already have an HTML template with an /assets folder and /css and /js folder with their own files, do I still need to tick these 2 options? Or would you suggest to manually drag and drop the css and js files?
Do you have any advice on this:
1. Is this the correct way to do it?
2. Would there be a setting to add those JS (bootstrap.min.js) and CSS (bootstrap.min.css) files in already existent /assets/js and /assets/css folders instead of a separate /bootstrap/js and /bootstrap/css folder?
I imported a bunch of CSS, JS and some HTML yesterday into a new project. But as it took some time, it made me wonder where those files are kept? I see them in the project and various folders within the project. I see an assets folder but are the files held there before saving? And also rather than importing all the files into the BSS project could I copy and paste the files into the assets folder and it would read them there instead if I closed and reopened it again?
BSS cannot read files outside of the app so the answer to if you put files in the assets folder will it read them, is no. You CAN however, upload files to a location on your server and use 'Absolute' links to the files so that you don't have to constantly change them before exporting. Or you can do as I do for some of my galleries which I use external scripts for and use 'Relative' paths once I am sure it's all working. You won't see it in preview since it cannot read from an external file source, but once exported and upload it should all work perfectly. Depends on your situation.
I would "Highly" recommend that you do "NOT" put things into the Assets folder that were not added there by BSS. My reasoning may not be the same as everyone else's, but if you do this: a. You risk deleting it if you accidentally use "replace" instead of "Merge" when you are copying your files over to the main directory after exporting (which is how I do it, rather than exporting directly to the live site's directory). Much better to just create a new directory for them where they can reside permanently without worrying about if you are going to have to constantly replace them if accidentally deleted.
When you import files into your open website project in BSS, you see them in the folders in the design tab in the lower left, but those folders don't actually exist in a physical sense on your hard disc. They exist within the software for the duration of the session, and when you save your website (or it is backed up by BSS), everything is compressed into a single file with the extension .bssdesign . This file is essentially everything that is in your website that the program decompresses when you open your website to work on it.
The only time the assets fold (and its subfolders) are created is when you EXPORT your website for the purposes of uploading to your server. I agree with Jo's #2 point above. You shouldn't put anything inside that assets folder after you've exported it. If you want to add files that can't be imported into BSS directly (live videos or PDFs, etc) either place them in the root directory, or just make a separate folder on your server, and reference the path in your BSS links. That way, you don't ever have to worry about BSS accidentally deleting or overwriting your own files the next time you export your site to upload it.
My first observation is that you may be heading down the premature optimisation path. The difference between the minimal bootstrap build, and the individual components isn't huge. And on top of this, the main advantage of using a CDN is that the browser will likely have already loaded and cached it (from use in another site: it's a common resource) so trying to do anything non-standard will increase load-times, not reduce them.
I have a web page using Twitter Bootstrap. It works well in Chrome, Firefox, and Safari. However, when I try to view it in Edge on Windows 10, I get a bunch of 403 errors saying it failed to load a slew of .less files from the Bootstrap CDN. Why are .less files being requested if the browser can't do anything with them? I am not using LESS at all, just plain CSS3, which is rendering just fine. How do I make this stop?
The source map file will only be downloaded if you have source maps enabled and your dev tools open. Edge defaults source maps on and as far as I can tell there is no way to switch them off (but remember this will only happen when the dev tools are open, I have confirmed this behaviour using Fiddler), so when you press f12 then it's going to try and fetch the source mapped files. Chrome works slightly differently, it will download the source map but then will not attempt to download the .less file until you navigate to the source file.
If you use http debugger such as Fiddler you will see that Chrome does indeed request the files and also gets a 403 response, however, it doesn't report it on the network tab. When using Fiddler to get past the https issue I changed the CSS file to point to the non https URL. e.g:
I want to add an icon file (for favicon) and some PDF files (for downloads) to my project design. I tried to drag those file to the design area but, it does not add those type of files. It allows only html pages, JavaScript files, css files and image files in design area. So, my question is how can I add icon, pdf and other type of files to my project design? Thank you.
hole E Shift! seriously they can't make it so I can drag and put in pdf's or other files? only Jpg's ??? They need to fix this asap. We paid how much for something that can't even perform the basic functions of free programs???? heck even their free version can upload a simple pdf file.... so dumb.
You're kidding right? BSS is probably the least expensive, most powerful and most flexible website builder on the market. You can import jpg, png, gif, svg image formats as well as css, js, and html file formats. The reason you can't import pdfs, videos, etc is because these kinds of files can be tens of megabytes to gigabytes in size. BSS saves your project as a single compressed file which contains all the imported files. The larger the imported files, the longer it would take save (and open) your BSS project. Do you want to wait five minutes every time you go to open your website because you've got a few hundred megabytes of compressed files in it?
It makes far more sense to just upload these files to your server, and then use paths on your links in the BSS program to point to them. Admittedly, it's a bit inconvenient that you can't live preview these files in the program or browser preview, but this is the method the devs chose to use. It's not that big of a limitation.
I would rather see them give us the ability to reference a local file to use as an extension of the files we have imported so we can not only view the pdf/movie/etc. in the preview window, but also to be able to use relative URLs.
So what would stop one from adding a 100mb "user manual?" Or ten such manuals? The .bsdesign file is compressed and decompressed on save-load. The more files you add to your project, the larger the .bsdesign file becomes, and the longer it takes to open and save. I don't want to have to wait 1-2 minutes to open my website project because it has to unzip a bunch of files that are not needed to facilitate the design process. Images yes, because I want to see what they look like on the page. But being able to add text files, PDFs, Word documents, etc... and even videos, is just going to slow down the program. Not to mention how massive the backup folder would become!
Hence why I suggest to create a connection to a local folder that can be read by the app. This way files can be directly referenced without importing them into the project file itself. This way any videos, PDF's, etc. could be read and viewed in the program "as if" they had been imported, the app would need to read that directory (and any of it's subdirectories) as if it were part of the app's file tree... sort of. Obviously it would need to adjust the locations to understand they are not within the "assets" folder so there is that, but I think that would suffice to give everyone what they need. A way to view the files in the app, a way to easily reference them same as you would files in the app where you can choose that location from the drop-downs etc, choose files from the drop-downs or popups same as the app does for internal files.
Step 12 : First we need to adjust bootstrap.scss to reflect the different folder. Open bootstrap.scss (1), click before functions (2), press CTRL+ALT and drag the line down to the end (3). Notice that the preceding underscore and the file extension have been removed.
Now that we have our all of our files in place, we can start with compiling our CSS file. For the moment, Wappler does not have a compiler, it is planned for a future release. Therefore we will have to depend on a third party app. I have found that Prepros, , to be the best solution. Go to their website and download the program. The rest of this tutorial assumes that you have installed Prepros on your system.
df19127ead