Home > DeveloperSection > Blogs > Bootstrap ScrollSpy, Miscellaneous and Breadcrumbs

Bootstrap ScrollSpy, Miscellaneous and Breadcrumbs


Bootstrap Bootstrap Framework 
Ratings:
0 Comment(s)
 1835  View(s)
Rate this:

Bootstrap ScrollSpy, Miscellaneous and Breadcrumbs

Hi everyone in this blog I’m explaining about Bootstrap components.

Creating ScrollSpy with Bootstrap:

The scrollspy is a navigation mechanism that directing visitors to the different sections of a page that has huge amount of content. Also the menu targets based on the scrolling position will be automatically highlighted to indicate the visitors where they are currently on the page. It saves the time and makes the content of your pages more accessible to the visitor.

Example:

Download these library:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Use Custom CSS:

<style type="text/css">

    ul.nav-tabs {

        width: 140px;

        margin-top: 20px;

        border-radius: 4px;

        border: 1px solid #ddd;

        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);

    }

 

        ul.nav-tabs li {

            margin: 0;

            border-top: 1px solid #ddd;

        }

 

            ul.nav-tabs li:first-child {

                border-top: none;

            }

 

            ul.nav-tabs li a {

                margin: 0;

                padding: 8px 16px;

                border-radius: 0;

            }

 

            ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {

                color: #fff;

                background: #0088cc;

                border: 1px solid #0088cc;

            }

 

            ul.nav-tabs li:first-child a {

                border-radius: 4px 4px 0 0;

            }

 

            ul.nav-tabs li:last-child a {

                border-radius: 0 0 4px 4px;

            }

 

        ul.nav-tabs.affix {

            top: 30px;

        }

</style>

HTML Code:

<div class="container">

    <div class="row">

        <div class="col-xs-3" id="myScrollspy">

            <ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix" data-offset-top="125">

                <li class="active"><a href="#section-1">Section One</a></li>

                <li><a href="#section-2">Section Two</a></li>

                <li><a href="#section-3">Section Three</a></li>

                <li><a href="#section-4">Section Four</a></li>

                <li><a href="#section-5">Section Five</a></li>

            </ul>

        </div>

        <div class="col-xs-9">

            <h2 id="section-1">Section One</h2>

            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

            <hr>

            <h2 id="section-2">Section Two</h2>

            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

            <hr>

            <h2 id="section-3">Section Three</h2>

            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

            <hr>

            <h2 id="section-4">Section Four</h2>

            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

            <hr>

            <h2 id="section-5">Section Five</h2>

            <p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>

        </div>

    </div>

</div>

 

Output:

 

Creating Miscellaneous with Bootstrap:

Bootstrap provides a handful of lightweight utility components for common usages.

Jumbotron:

The Bootstrap jumbotron component provides an excellent way to showcase the key content or information on a web page. Just wrap your featured content like heading, descriptions etc.

Html code:

<div class="container">

    <div class="jumbotron">

        <h1>MindStick</h1>

        <p>We have sharing the knowledge and provide services…</p>

        <p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>

    </div>

</div>

Output:

 

Creating Breadcrumbs with Bootstrap:

A breadcrumb is a navigation scheme that indicates the user's location in a website or web application. Breadcrumb navigation can greatly enhance the accessibility of websites having large number of pages.

This is a simple example of creating breadcrumbs with Bootstrap.

<div class="bs-example">

        <ul class="breadcrumb">

            <li><a href="#">Home</a></li>

            <li><a href="#">Products</a></li>

            <li class="active">Accessories</li>

        </ul>

    </div>

 

Output:

 

in my next post i'll explain about Step for Computer Troubleshooting


Don't want to miss updates? Please click the below button!

Follow MindStick