MathType

Nav Pills 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Демонстрация на Bootstrap</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

        <!-- Minified jQuery -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
    </head>
    <body>
        
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">

                    <!-- Долните редове от <ul> до </ul> реализират вертикални бутони -->
                    <ul class="nav nav-pills nav-stacked">
                      <li class="active"><a href="#">Бутон 1</a></li>
                      <li><a href="#">Бутон 2</a></li>
                      <li><a href="#">Бутон 3</a></li>
                      <li><a href="#">Бутон 4</a></li>
                    </ul>

                    
                </div>
                <div class="col-md-10">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus nec nibh consectetur ornare vel et tortor. Nam at nunc nec arcu dignissim efficitur et vitae tellus. Etiam in neque vitae urna dignissim bibendum. Proin interdum magna tristique imperdiet condimentum. Suspendisse varius volutpat nunc, ac consectetur urna varius nec. Nullam sit amet libero quam. Sed molestie, massa ultrices viverra ornare, leo turpis aliquam mi, nec mattis lacus massa quis metus. 

Duis eget malesuada magna, vitae rhoncus ipsum. Nam condimentum purus ut suscipit euismod. Fusce eget turpis id lorem commodo posuere nec nec magna. Proin nulla quam, dignissim a odio eu, sagittis accumsan turpis. Donec vestibulum suscipit mauris. Donec sit amet posuere velit. Vivamus sit amet maximus nulla. Quisque lorem nulla, posuere quis pulvinar sed, faucibus vel dolor. Etiam id varius lectus. Vivamus molestie mauris et magna placerat lobortis. Fusce non malesuada nunc. Curabitur ac libero vel sem malesuada varius. 

Phasellus posuere tempus orci a ullamcorper. Suspendisse potenti. Morbi fermentum libero id felis dictum, vitae commodo mauris imperdiet. Nunc suscipit placerat tellus, tincidunt viverra ante sagittis vel. Nam id dui mollis, elementum ligula ut, sodales leo. Mauris ipsum sapien, malesuada scelerisque lacus laoreet, egestas iaculis ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus lorem ac fermentum sagittis. Aliquam vel magna ac erat tristique tempus. Nulla lobortis pretium orci, eget pellentesque massa suscipit eu. Aliquam vehicula consequat leo, aliquam aliquet justo tincidunt id. Phasellus suscipit sollicitudin diam pulvinar sagittis. 

Ut accumsan tristique neque non hendrerit. Sed bibendum augue laoreet lacus lacinia mattis. Sed ut commodo nunc, ut lobortis felis. Quisque commodo elit eu tincidunt maximus. Quisque tincidunt venenatis porta. Suspendisse potenti. Sed sapien nisl, rhoncus a enim eget, rhoncus finibus lectus. Maecenas lacinia accumsan varius. Ut a malesuada ante. Nulla feugiat purus a pharetra vulputate. Proin fringilla est vel placerat auctor. 

Duis dignissim sapien eu imperdiet imperdiet. Maecenas mauris neque, varius vel suscipit nec, porttitor vel turpis. Mauris vel velit rutrum, ultricies est non, ornare ligula. Vestibulum scelerisque convallis fermentum. Aliquam sed leo id lectus venenatis lacinia. Nam finibus eros vel volutpat imperdiet. Integer bibendum neque cursus quam faucibus, non cursus tellus tristique. Nulla lacinia convallis lobortis. Donec sed ligula in est tristique finibus venenatis nec nunc. 

                </div>
            </div>
        </div>
        
    </body>
</html>

Няма коментари:

Публикуване на коментар

Абонамент за: Публикации (Atom)