summary.pptx

Bootstrap


<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

</head>

<body>

    <div class="container">

        <h3>Tabs</h3>

        <ul class="nav nav-tabs"><!--<ul class="nav nav-pills">-->

            <li class="active"><a class="na" name="mhome.html" href="#">Home</a></li>

            <li><a class="na" name="menu1.html" href="#">Menu 1</a></li>

            <li><a class="na" name="menu2.html" href="#">Menu 2</a></li>

            <li><a class="na" href="#">Menu 3</a></li>

        </ul>

        <br>


        <div id="contain">

            <p>Main Page...</p>

        </div>

    </div>

</body>

<script>

    $(function () {

        prev = $('li').first();

        $('#contain').load('mhome.html');

        $('.na').click(function () {

            $(prev).removeClass('active');

            d = $(this).attr('name')

            $('#contain').load(d);


            $(this).parent().addClass('active');

            prev = $(this).parent()

        })

    })

</script>

</html>


<ul class="nav nav-pills nav-stacked">

- vertical로 나온다.


<ul class="nav nav-tabs nav-justified">

- 꽉차게 나온다.


[이미지 슬라이드]

Bootstrap Carousel Plugin

'SK고용디딤돌' 카테고리의 다른 글

직무교육 19일차(Bootstrap)  (0) 2017.08.08
직무교육 18일차(jQuery Mobile)  (0) 2017.08.07
직무교육 17일차(jQuery)  (0) 2017.08.04
직무교육 16일차(jQuery)  (0) 2017.08.03
직무교육 15일차(jQuery)  (0) 2017.08.02

+ Recent posts