Twitter Bootstrap Question posted in

Is there a standard way to have automatic links to headers in Twitter Bootstrap?

On the Bootstrap page itself, all of the headers and subheaders have a nice little anchor icon that shows up whenever you hover over the header; that icon provides a link to this header. I’d like to incorporate that into my own Bootstrap-based site, but I can find no documentation about it. Is this a standard mechanism in Bootstrap, or is it something separate they added to their documentation pages?

Tags:

2

Answers


  1. 0

    Looks like a custom CSS statement from their docs stylesheet:

    .anchorjs-link:focus, :hover>.anchorjs-link {
     opacity: .75;
     transition: color .16s linear;
}

    This brings the opacity of the anchors from 0 to 75% on hover of the parent element. You’d generate the links with your server-side app and apply similar styling in your custom stylesheet.

    Core Boostrap styles are shown as being from boostrap.min.css in your browser’s inspector, and custom docs styles are in docs.min.css. If you’re not familiar with the use of your browser’s inspector, now’s the time. It’s an invaluable tool.

    Login or Signup to reply.
  2. 0

    Bootstrap’s documentation uses Anchor.js to add those links & icons. It is not part of Bootstrap itself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search