Difference between revisions of "Team:BIT-China/Notebook"

Line 75: Line 75:
 
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
     <![endif]-->
 
     <![endif]-->
 +
<style type="text/css">
 +
            .demo{
 +
                width: 100%;
 +
                height: 600px;
 +
                min-height: 600px;
 +
            }
 +
        .tab .nav-tabs{
 +
                border-bottom:0 none;
 +
                background: #eaeaea;
 +
                border-radius: 0 20px 0 20px;
 +
            }
 +
            .tab .nav-tabs li {
 +
                padding: 0;
 +
            }
 +
            .tab .nav-tabs li a{
 +
                background: transparent;
 +
                border-radius: 0;
 +
                font-size: 16px;
 +
                border: none;
 +
                color: #333;
 +
                padding: 12px 22px;
 +
            }
 +
            .tab .nav-tabs li a i{
 +
                margin-right:10px;
 +
                color:#775ba3;
 +
            }
 +
            .tab .nav-tabs li:first-child a{
 +
                border-bottom-left-radius:20px;
 +
            }
 +
            .tab .nav-tabs li:last-child a {
 +
                border-top-right-radius: 20px;
 +
            }
 +
            .tab .nav-tabs li.active a,
 +
            .tab .nav-tabs li.active a i{
 +
                border: 0 none;
 +
                background:#775ba3;
 +
                color:#fff;
 +
            }
 +
            .tab .nav-tabs li.active a:after{
 +
                content: "";
 +
                position: absolute;
 +
                left: 45%;
 +
                bottom: -14px;
 +
                border: 7px solid transparent;
 +
                border-top: 7px solid #775ba3;
 +
            }
 +
            .tab .tab-content{
 +
                padding:12px;
 +
                color:#5a5c5d;
 +
                font-size: 14px;
 +
                line-height:24px;
 +
                margin-top: 25px;
 +
                border-bottom:3px solid #775ba3;
 +
            }
 +
            @media only screen and (max-width: 480px) {
 +
                .tab .nav-tabs,
 +
                .tab .nav-tabs li{
 +
                    width:100%;
 +
                    background:transparent;
 +
                }
 +
                .tab .nav-tabs li.active a{
 +
                    border-radius:10px 10px 0 0;
 +
                }
 +
                .tab .nav-tabs li:first-child a{
 +
                    border-bottom-left-radius:0;
 +
                }
 +
                .tab .nav-tabs li a{
 +
                    margin-bottom:10px;
 +
                    border:1px solid lightgray;
 +
                }
 +
                .tab .nav-tabs li.active a:after{
 +
                    border:none;
 +
                }
 +
            }
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
Line 133: Line 208:
 
     <div class="container">
 
     <div class="container">
  
−
       <!-- Main component for a primary marketing message or call to action -->
+
       <div class="htmleaf-container">
−
      <div class="jumbotron">
+
<div class="demo">
−
        <h1 class="title-pos">TITLE{Project Name}</h1>
+
                            <div class="container">
−
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+
                                <div class="row text-center">
−
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
+
                                    <h1 class="white">title</h1>
−
        <p>
+
                                </div>
−
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
+
 
−
        </p>
+
                                <div class="row">
−
      </div>
+
                                    <div class="col-lg-12">
 +
                                        <div class="tab" role="tabpanel">
 +
                                            <!-- Nav tabs -->
 +
                                            <ul class="nav nav-tabs" role="tablist">
 +
                                                <li role="presentation" class="active col-lg-4"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-envelope-o"></i>Section 1</a></li>
 +
                                                <li role="presentation" class="col-lg-4"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab"><i class="fa fa-cubes"></i>Section 2</a></li>
 +
                                                <li role="presentation" class="col-lg-4"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab"><i class="fa fa-comments"></i>Section 3</a></li>
 +
                                            </ul>
 +
                                            <!-- Tab panes -->
 +
                                            <div class="tab-content">
 +
                                                <div role="tabpanel" class="tab-pane fade in active" id="Section1">
 +
                                                    <p>1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
 +
                                                </div>
 +
                                                <div role="tabpanel" class="tab-pane fade" id="Section2">
 +
                                                    <p>2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.</p>
 +
                                                </div>
 +
                                                <div role="tabpanel" class="tab-pane fade" id="Section3">
 +
                                                    <p>3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis. </p>
 +
                                                </div>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
</div>
  
 
     </div> <!-- /container -->
 
     </div> <!-- /container -->

Revision as of 02:52, 5 August 2017

BIT-CHINA

BIT-CHINA

title

1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.




</html>