Provide example with self generated toc about bootstrap-toc HOT 3 CLOSED

Sorry, what do you mean by "self-generated"? http://afeld.github.io/bootstrap-toc/ itself shows the plugin in use.

use a different layout. There seems to be no documentation available about this situation.

I talk about this a bit here:

http://afeld.github.io/bootstrap-toc/#layout

Can you elaborate on what you're looking to do with it?

from bootstrap-toc.

@afeld With "self-generated" I mean to just statically pre-generate the TOC myself. I don't want to generate it with JavaScript because of SEO purposes.

Also I would like to have a layout like here for example:
http://bootsnipp.com/snippets/featured/accordion-list-group-menu
The default style doesn't seem to have a good usability, as the links are too small for tapping on mobile devices.
As the plugin generates the HTML itself, it seems to be impossible to have a different HTML without refactoring the plugin.

from bootstrap-toc.

statically pre-generate the TOC myself

Ah, gotcha. I haven't made this plugin Node.js-compatible, but that wouldn't be too hard theoretically. I'd accept a pull request for that.

You could also generate the same/similar HTML structure with whatever templating language you use on your server, and then hook up Scrollspy.

the links are too small

I was just trying to match the sidebar on http://getbootstrap.com/css/ ... you can adjust the font size by adding the following to your stylesheet:

/* the top-level nav */
nav[data-toggle='toc'] .nav > li > a {
  font-size: 20px;
}
/* the sub-nav */
nav[data-toggle='toc'] .nav .nav > li > a {
  font-size: 19px;
}

the plugin generates the HTML itself

Yep, that's kind of the point 😉

I would like to have a layout like here

That seems doable without modifying the plugin... the rounded corners, background and text color, and icons should all be possible by overriding CSS properties, as shown with the font size above.

Hope that helps!

from bootstrap-toc.