Hi i would like to use bootstrap themes inside some websites that i am developing, however after looking at the documentation and searching online i have found it somewhat troubling that there is no explicit how to guide start to finish with using bootstrap themes, like found here. Furthermore i would like to download multiple themes into my project directory, extract them into the appropriate folders e.g. (css,img,js,ect...) and utilize them inside of my html files like so:
<div class="customized-bootstrap-item">myItem</div>
I am having a bit of trouble trying to do this because it seems there is no universality among the themes(e.g. each one may vary in how they work) and i don't want to hack together some dirty code if there is a proper way of doing it. So my question is , is there a proper way of adding themes into your existing project purely for aesthetics and customizing them by exchanging the appearance between one them and other themes, and if so how?
Can you guys point me towards some tutorials? I need to know more about how linking these js and css files will affect other aspects of the themes, and how the html tags can be used properly in a uniform way across many themes, as i won't settle likely on just one theme.
edit:
After trying some of the suggestions i managed to figure out at least some of the problems i was having by including the css style of the specific theme that i want to use as a stylesheet link in the head section of the html page that i want to apply it to, which seems pretty straight forward anyway. However i'm still a little bit perplexed on how to get all of those cool elements that i see in the themes, especially the dashboard themes into my custom html page. A good example of a theme that i am looking at is found here. If you guys could give me a bit of insight on how to get those elements on the page (i.e. dashboards, panels, UI elements etc...) that would be great. I may be mistaken but i don't think they are normal bootstrap classes, although i'm fairly new to bootstrap so i'm not 100% sure on that.
The definitions for all of these classes are located in a .css file, likely called 'bootstrap.css'. In the html page where you want to use bootstrap, add
<link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" />inside your . This will import all of bootstrap's css. If you need to use other themes, simply add that .css file into whatever folder has your css, then link to it in an html page.
This is a great resource you can use to generate a theme http://www.lavishbootstrap.com/ then linking this to your existing site is quite easy: you simply include the <link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" /> line in your code.
If you have downloaded from lavish it will include lavish-bootstrap.css. Don't forget to include jquery.js and bootstrap.js or the dropdowns etc. will not be functional.
Related
which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.
I have an application with only one aspx page (Default.aspx).
This page loads .ascx controls as needed.
All these controls are using the same JS and CSS file.
Now I want to apply Bootstrap on some of them. But I am scared that bootstrap will break some CSS and JS.
So I am thinking about wrapping each control in an Iframe (because what I know is:
Iframe blocks inheritance of CSS and JS).
Is my solution ok ?
Or Is there a way to know which CSS and JS is needed by each control?
thanks
My advice is that even if you're breaking your application markup into controls (ascx files), you should apply a consistent theme and serve just one bundle of CSS and one bundle of JS. This will help performance of your site as well as be easier to maintain. Also, it'll be easier to keep a consistent look and feel for your users.
So if you're going to use Bootstrap, use it everywhere. Write your JS functions such that they aren't dependent on a given markup, and so on.
I'm currently using a design that I made using the following tutorial to have both a black/white background on my website:
http://designshack.net/articles/css/lightsoff/
While this tutorial somewhat gets the job done (very sensitive to altering pieces of html/css around), I'm really looking for a much more elegant implementation. Is there any way to create a toggle'd switch using jquery or javascript that allows for changing the background color of an entire website?
I just picked up web programming as a hobby about a week ago so I know very little about javascript and jquery right now.
EDIT: I have a static site and I'm not too concerned on performance since the only person looking at this website 99.9% of the time will be me.
Write this in javascript
var i=1;
function myFun()
{
if(i%2==0)
document.body.style.backgroundColor="black";
else
document.body.style.backgroundColor="white";
i++;
}
in event of click
<button onclick="myFun()">Click me</button>
I hope you got your ans. :)
You could create a separate css file with styles defined for all the required elements in the page, and then add the css dynamically to the page based on the button click, or a radio select as shown below.
$('head').append('<link rel="stylesheet" href="style1.css" type="text/css" />');
and
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
Here is a nice tutorial, which explains it
http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery
Code your website using whatever you prefer as the default color scheme. Then, create css for alternate color schemes that are under a theme subclass. For instance:
p,h1 {color:red;]
.blue-theme p,h1 {color:blue;}
Then just use javascript or server-side variables to add the "blue-theme" class to your body or root element tag. This also makes it easy to transition between themes if you apply a css transition!
It's not the most efficient in terms of load sizes, as your CSS file will be slightly larger, and performance is not optimal as adding a theme will cost processing time, but for general use I believe it's the best way to accomplish this.
jQuery is great for helping beginners add this type of functionality to websites. First, setup your CSS similar to this:
body {
background-color: #fff;
}
body.dark {
background-color: #000;
}
This sets the default css to white, and then using JavaScript you'll add a "click handler" to you button by referencing the buttons id attribute to change the class (and resulting color):
$('#yourButtonID').click(function() {
$('body').toggleClass('dark');
});
You'll want to make sure you include a copy of jQuery in a tag before you execute the above code on the page.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
Using jQuery for just this single application might be overkill, but it is the easiest way to accomplish what you want without experience and it's a library you can do a lot more with if you dive deeper into it. Good luck!
I'm not going to give you the exactly code but definately look into some of the updating functions of javascript and implement css. Maybe load different css files as colors themes for your website.
Let's say I'm building a website and using an already made Wordpress theme. Say it's a pretty complex theme and there's a lot of folders and files. If I wanted to change something specific, like text, or an image, or something that happens in Javascript/jQuery, and the change that I want is not an option in the themes control panel, what do I do? I know I have to go into the files but how do I know which file to go to? Lately, I've just download the theme to my desktop and use the windows search companion and type in the field that says "a word or phrase in the file." Sometimes it comes up and sometimes it doesn't. For CSS changes I usually use Firebug and click on the element, but many times I want to change the HTML/PHP/Javascript. I feel like I'm doing it the wrong way and there's an easier way that I'm missing.
As you mentioned WordPress theme so I will specifically try to answer this question for editing WordPress theme.
When it comes to WordPress, everything is very structured and well organized. If theme written following standard practices then each component has its specific file. If you are familiar with WordPress theme structure and want to change php code or say a static part then all you need to do is locate the component file say sidebar.php, home.php, single-{type}.php, header.php and many similar files. http://codex.wordpress.org/Template_Hierarchy
Now if you want to edit something that is shown in right/left side of page as sidebar then chances of finding it in sidebar.php are maximum. Similarly to change something on home page try looking for home.php, for posts it could be single-post.php.
Many a times what you are looking to change might need a tweak in widgets. In this case, process remains same as theme you just need to look in different folder.
Javascript: For editing javascript, beautify the code if it came minified. When you have code ready much of js debugging can be done using firebug/Developer Console in chrome. Best way is to put breakpoints at relevant position and then inspect code behavior. You will be able to locate code block that you need to tweak to achieve what you want.
CSS: Create a child theme and then use it override default theme properties.
You can probably use grep in PowerShell, Cygwin, etc.
grep -lir "a word or phrase in the file." *
edit: Emulating Grep in Powershell
Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.
Link to functional popover directive plunker from angular ui site.
Link to non-functional replication of popover directive that I put together.
Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.
For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).
It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.
Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).
Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview
Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.
Or, alternatively, using the CDN version of the bootstrap css also fixes the issues:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">