How to use only one element from twitter bootstrap? - html

How to use this ( https://github.com/silviomoreto/bootstrap-select ) twitter bootstrap plugin only for one element on the page? If I use it all my site use twitter bootstrap element (url are blue etc.)
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-select.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="bootstrap-select.css">
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
});
</script>

From your comment you are including:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combi‌​ned.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"‌​>
On your site. This means you're including the whole of twitter bootstrap which adds some styles to normal html elements.
Instead of this, why not download just the files you linked to on github and use those instead, i.e. (if you host them yourself):
<link href="path/to/bootstrap-select.min.css" rel="stylesheet">
<script src="path/to/js/bootstrap-select.min.js"‌​>
If you needed other features from bootstrap you could also create a custom build using this resource.

In that case, you have two solutions.
Take the .less sources from github and rebuild bootstrap with only the things you need. In other words you'll have to remove most .less files from the build process and take only the things you need.
Since you only have one element, add the selector to a page with bootstrap and extract all the css related to this element. Put this css in a different file and link it in your html. Once you copied all the required css declarations everything should look as expected.
You can then rename classes if needed.
To copy css declaration used in the browser you can use dev toolbars from firefox/chrome and so on. There might be good plugins that makes the job easier.

Related

Bootstrap css is not working when using carousel

So basically it looks like my carousel does not have any styling whatsoever. I copied the exact code from ng-bootstrap carousel example but mine looks like this when running.
This is ngbootstraps
result.
Steps I did before:
I installed #ng-bootstrap/ng-bootstrap, then I added bootsrap to my css and after that I imported ngModule and added it to my modules.
Any ideas why this does not work?
So, in my opinion, you added bootstrap incorrectly. When you are implementing bootstrap 5 to your html besides adding this in :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
You also have to add this right before body closing tag:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
This script basically makes interactive elements possible without using js. Here is a link to doccumentation if you want to learn more:
https://getbootstrap.com/docs/5.2/getting-started/introduction/
Lemme know if this helped

How can I load a custom CSS for a few lines in my code?

I want to use Bootstrap for dropdown content, and it works perfectly fine, however, it than overrides the default CSS I'm using on my website and most of the things are looking awful below that button. I have tried to unload the CSS (Bootstrap) after I don't need it with the following code, but it is not working.
<script type="text/javascript">
jQuery('link[href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]').prop('disabled', true);
</script>
Link your default.css file below the bootstrap.css. default.css style definitions will override bootstrap.css
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="default.css">

why some icon doesn't appear correctly when we include the css folder in nodejs?

I'm creating an interface using Bootstrap and CSS,but when I run this page without including the project in nodejs program the page appears very well but when I include the bootstrap folder in nodejs program,some icons didn't appear such as the logout icon and login icon(I got a recatngle in place of the suitable icon).Does any one know what is the problem??
Are you using font awsome for the icons? if so have you included those in you code ie,the following code into the head section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">?
I added this two tag to the header:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Angular file includes and separation - Best practice

I have 3 different links on my homepage. I am trying to have each link go to a page that looks something like this:
<link rel="stylesheet" href="/assets/common/temlate1.css">
</head>
<body>
<div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template1.js" type="text/javascript"></script>
</body>
I need each link on homepage to have different css, html and js files associated with it. For example:
If I click link 1: the file will look like the one above. If I click link 2, the file will look like this:
<link rel="stylesheet" href="/assets/common/temlate2.css">
</head>
<body>
<div ng-include="'/assets/common/template2.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template2.js" type="text/javascript"></script>
</body>
And the third link will have the files:
template3.css
template3.html
template3.js
What is the best way to accomplish what I want. I do NOT want to include all css and js files together. What I mean is I do not want to have this at the bottom of my file: The same is true for the css files.
<script src="/assets/common/template1.js" type="text/javascript"></script>
<script src="/assets/common/template2.js" type="text/javascript"></script>
<script src="/assets/common/template3.js" type="text/javascript"></script>
I am only showing you a small portion of the website so that this question is easy to understand. I have a lot of other links in the head section and a lot of js links above the body tag. All of these are common to all 3 templates. Therefore, I would like to use the same file and just replace the 3 areas mentioned above.
How do I accomplish this? I am hoping for a solution in angular. Maybe someone can point me in the right direction.
I think you'll have to define different modules within AngularJS to accomplish this. They can each have their own template.
So in short:
angular.module('page1');
angular.module('page2');
angular.module('page3');
They can all have their own templates, respectively page1.html, page2.html, and so on ...
This looks like a good explanation: https://docs.angularjs.org/guide/module

Does "make javaScript and CSS External" mean to use JavaScript to load CSS and JS?

Make javaScript and CSS External
Source.
Does that mean I should use JavaScript to load JavaScript and CSS files ?
No, it means link them with link and script elements so they can be downloaded once and cached for subsequent requests.
Good example.
<link rel="stylesheet" type="text/css" media="screen" href="/css/common.css" />
<script type="text/javascript" src="/js/common.js"></script>
If you include the code and styles inline, they must be downloaded per request.
Bad example.
<style type="text/css">
...
</style>
<script type="text/javascript">
...
</script>
However, loading assets with JavaScript can often be a good idea too.