Bootstrap Snippet Info zawodnika using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- ZAWODNIK INFO -->
    <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            WŁĄCZ
        </button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="container">
                    <div class="row">
                    <!-- Okienko modala -->                    
                        <div class="col-md-8">
                            <!-- Nav tabs --><div class="card">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#informacje" aria-controls="home" role="tab" data-toggle="tab">Informacje</a></li>
                                    <li role="presentation"><a href="#starty" aria-controls="profile" role="tab" data-toggle="tab">Wcześniejsze starty</a></li>
                                    <p class="text-right"><button type="button" class="btn btn-link glyphicon glyphicon-remove" data-dismiss="modal"></button></p>
                                </ul>
                            <!-- Tab panes -->
                                <div class="tab-content">
                                    <!-- INFORMACJE -->
                                    <div role="tabpanel" class="tab-pane active" id="informacje">
                                        <div class="row">
                                            <div class="col-md-1"></div>
                                            <div class="col-md-4"><img src="https://wejherowo.karatecup.pl/wp-content/uploads/cup-images/zawodnicy/karate-per.jpg" class="img-circle"></div>
                                            <div class="col-md-6">
                                                <table class="tabela-zawodnik">
                                                    <tr><td><strong><p class="text-right">Imię:</p></strong></td><td>·Wojciech</td></tr>
                                                    <tr><td><strong><p class="text-right">Nazwisko:</p></strong></td><td>·Wawer</td></tr>
                                                    <tr><td><strong><p class="text-right">Klub:</p></strong></td><td>·Sonkei<a href="#" class"glyphicon glyphicon-new-window">·<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a></td></tr>
                                                    <tr><td><strong><p class="text-right">Data urodzenia:</p></strong></td><td>·26.09.2009 rok</td></tr>
                                                    <tr><td><strong><p class="text-right">Wiek (aktualny):</p></strong></td><td>·7 lat</td></tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.nav-tabs-zawodnik { 
    border-bottom: 0px solid #DDD; 
}
.nav-tabs-zawodnik > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { 
    border-width: 0; 
}
.nav-tabs > li > a { 
    border: none; color: #337ab7; 
    font-size: 18px;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { 
    border: none; 
    color: #337ab7 !important; 
    background: transparent; 
}
.nav-tabs > li > a::after { 
    content: ""; 
    background: #337ab7; 
    height: 2px; 
    position: absolute; 
    width: 100%; 
    left: 0px; 
    bottom: -1px; 
    transition: all 250ms ease 0s; 
    transform: scale(0); 
}
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { 
    transform: scale(1); 
}
.tab-nav > li > a::after { 
    background: #337ab7 none repeat scroll 0% 0%; 
    color: #fff; 
}
.tab-pane { 
    padding: 7px 0; 
}
.tab-content {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Info zawodnika"
Bootstrap 3.3.0 Snippet by strikerlg

Related: See More

Questions / Comments:

"Info zawodnika" Bootstrap 3.3.0 Snippet by strikerlg

Related: See More

Questions / Comments:

"Info zawodnika"
Bootstrap 3.3.0 Snippet by strikerlg