I must be missing something simple. But I'm importing bootstrap 3 like so:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Which works fine. I'm then attempting to import the bootstrap-switch using the CSS they use on their example page: http://www.bootstrap-switch.org/. Which doesn't work. What should I be importing to get the following to work:
<div class="make-switch switch-mini">
<input type="checkbox" checked>
</div>
Thanks in advance for the idiots guide to this.
Scroll down to the bottom of the page of bootstrap-switch and you will find :
<script src="static/js/bootstrap-switch.js"></script>
You have this js file missing.
They always include js files at the bottom of the page to reduce page load time!! :)
You missed to include the bootstrap-swith.js
<script src="static/js/bootstrap-switch.js"></script>
There is also a bootstrap-switch.js you have to include. You only mentioned the css. Could that be the problem?
Related
I added cdn to next.js head section but it does not work.
import Head from "next/head";
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
></link>
</Head>;
I tried to render this simple icon but it does not show any icon. it just simply shows string "add"
<i className="material-icons">add</i>
I came across the same problem and the following worked for me:
Add the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css. After I did this, icon name worked
The workaround I found is to use Code point instead of the icon name:
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</Head>
<span className="material-icons"></span>
I solved this by disabling font optimization: https://nextjs.org/docs/basic-features/font-optimization
I am having an issue in CSS where I am not able to re-collapse my mobile menu after it's initially been opened. I can't seem to track the issue down.
You can inspect the CSS and function here: http://www.whatshoulditraintoday.com/
Could someone please provide a valid explaination of what's going on here so that I may learn and fix this?
Thank you
The reason the navigation bar doesn't re-collapse is because you load Bootstrap's files two times in your page. One regular and one minified version.
<!-- In head -->
<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- In body -->
<script src="/js/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
Remove one version and it will re-collapse as expected.
I trying to import 2 css files as follows:
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bootstrap.css">
And for some reson its doesnt working, What would be the problem?
The order of loading css really matters, I think the bootstrap.css file has some class or id which has the same id as you have in general.css. The last css file will cover the previous one.
Correct! The order of loading css really matters. Please check the order you are loading and could you please post your exact issue? Like which part are you not able to get in your html page? #user11001
currently Im using bootstrap-table for my mini-project.
Im trying to use the data-show-toggle together with data-show-columns and data-search to provide more usability.
But the data-show-toggle button is displayed slightly smaller than the other button. Is there any setting i overlooked?
Heres my table setting, js and css import. appreciate for any help given. :)
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--Bootstrap-Table-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-show-columns="true"
data-search="true"
data-show-toggle="true">
....
</table>
screenshot here
I could not find a regular way to change toggle button size and fix this issue, neither the reason. That's why I decided to change the javascript file directly(also I needed to translate some texts). I would not recommend this way because it is not proper use.
I'm a newbie when it comes to using Bootstrap plugins (just learned about it via codecademy)... I really would like to use this awesome bootstrap markdown plugin but fail to properly install it so I can call the getContent and parseContent from the textarea.
If you could help me I would really appreciate it it - a lot!
I have done this so far (mocking up the example from codecademy)
What I want:
What I did so far
Downloaded the following libs (jquery, bootstrap, bootstrap-markdown, to-bootstrap, markdown) via bower and copied the these files into the js/vendor folder
jquery.js (v2.1.1)
bootstrap.js (v3.1.1)
bootstrap-markdown.js (v2.5.0)
he.js (v0.4.1)
to-markdown.js (no version number)
markdown.js (no version number)
index.html
<!doctype html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
</head>
<body>
<div class="container">
<form>
<textarea name="content" data-provide="markdown-editable" rows="2" class="status-box md-input"_>### Hello World
*This* **is** the ***ultimate test***.
</textarea>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class='rows'>
<ul class="posts list-inline">
</ul>
</ul>
</div>
<script src="js/vendor/showdown.js"></script>
<script type='text/javascript' src="js/app.js"></script>
</body>
</html>
I actually think that this install the plugin correctly (my initial thought was that I didn't install the plugin correct which was why I couldn't make it work).
But how do I get the content from the textarea via the bootstrap-markdown API's .getContent() and .parseContent() instead of having to use the .getVal() and convert the string to html via showdown?
So far I can get it this way
app.js
$(".status-box").markdown({
savable:true,
onSave: function(e) {
$('<li class="col-xs-6 pull-left raw-markdown">').append( e.getContent() ).prependTo('.posts');
$('<li class="col-xs-6 pull-right end-markdown">').append( e.parseContent() ).prependTo('.posts');
}
});
Which is good. But I want to be able to access via the Post button instead.
I tried without luck:
var post;
$(".status-box").markdown( post = e.getContent() );
e represent the markdown edit only inside the onSave function.
So you have to get the markdown instance, I checked the plugin and it's possible (hacky but possible :-)
If you want to access it inside your post click function you have to access it in this way:
get the markdown element
get the markdown instance via data('markdown')
use the parseContent function
Code:
$(".btn-post").click(function (e) {
post = $('.status-box').data('markdown').parseContent();
console.log(post)
});
Demo: http://jsfiddle.net/IrvinDominin/fdpM4/
Have you download bootstrap - markdown.js file into your work environment. Check The link of bootstrap - markdown.js file. The lib of markdown.js may be missing in your code.
UPDATE
HI #Norfeldt,
For This you have to follow Below Instructions.
1. Check Compatibility versions between bootstrap.min.css and bootstrap.min.js.(i.e you must maintain same versions for both the things.) Because http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css Link contains Bootstrap version 3.0 css and http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js Link contains Bootstrap 2.3.2 version JS.
2.Maintain Correct root Directory path.
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
<script src="js/bootstrap-markdown.js"></script>
must be
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
3. Which version of bootstrap-markdown.js lib you are using.
Check this one
Version Compatibility with Bootstrap
Bootstrap Markdown v2.x only compatible with Bootstrap 3.x
Bootstrap Markdown v1.x only compatible with Bootstrap 2.x
Note: Download bootstrap files from Here add add to your html file.
Change path of these js file
<script src="js/markdown.js"></script>
<script src="js/to-markdown.js"></script>
To
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Hope this will help you...