docsifyjs
About bootstrap.css
How to write an example of a bootstrap based js plug-in? When I introduce the cdn of bootstrap. css into the index. html page, it will cause style confusion
Got code sample? You should be able to put bootstrap.css into your page, and then you'll have styles.
Due to the sheer size the bootstrap and jquery files will bring and the impact on load times, you might want to pick and choose what you want as per your use case: You can create a Bootstrap-based JS plugin for Docsify with the following steps, including creating the plugin file, including the necessary Bootstrap and jQuery scripts, and defining the plugin functionality. Here's a general outline of the steps:
Create a new JS file for your plugin, such as docsify-bootstrap.js.
In the new file, add the necessary script tags to include Bootstrap and jQuery:
// docsify-bootstrap.js by abpanic
document.write('<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">');
document.write('<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>');
document.write('<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>');
document.write('<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>');
Define your plugin functionality using Bootstrap and/or jQuery. For example, you could create a plugin that adds a Bootstrap modal to a Docsify page when a button is clicked:
// docsify-bootstrap.js by abpanic
$(function() {
$('body').append('<div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Modal Title</h4><button type="button" class="close" data-dismiss="modal">×</button></div><div class="modal-body">Modal body text goes here.</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div></div></div></div>');
$('.my-btn').click(function() {
$('#myModal').modal('show');
});
});
Save the file and include it in your Docsify index.html file using the loadSidebar option:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Docsify Site</title>
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/docsify.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
loadSidebar: 'docsify-bootstrap.js'
}
</script>
</body>
</html>
Restart your Docsify server and your plugin should be loaded on your pages. Note that this is just a basic example and you can customize the plugin to suit your needs using Bootstrap and jQuery features.
