Giúp mình bài tập bootraps

Mọi người giúp mình làm cái này bằng bootraps mới. Biết dùng nav-tab rôi mà nó cứ căn css nó loạn hêt cả lên

Nguyen Ca viết 21:44 ngày 30/09/2018

Lên đấy lấy về chỉnh sửa này:

Bootsnipp.com

HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com.

Nguyễn Hữu Quyền viết 21:42 ngày 30/09/2018

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Simple Form</title>
    <link rel="stylesheet" href="">
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
        
        body {
            margin: 15px auto;
            padding: 50px;
        }

        #rental-tab {
            background:  rgb(233,193,2);
            border-radius: 0px;
        }

        #li-rental-tab {
            float: right;
        }

        .nav.nav-pills li a {
            color: rgb(92,71,0);
            height: 50px;
            text-align: center;
        }
        
        .nav.nav-pills li {
             min-width: 150px;
        }

        .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
            background: none;
            color: rgb(92,71,0);
        }

        #panel-btn-submit {
            background:  rgb(237,197,4);
            height: 100px;
        }

        #submit-btn{
            margin: 25px auto;
            height: 50px;
            width: 200px;
            background:  rgb(246,212,54);
            color: rgb(92,71,0);
            border: 1px rgb(92,71,0);
        }
    </style>
</head>
<body>
    <div role="tabpanel" id="container">
        <!-- Nav tabs -->
        <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active" id="hotel-tab">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">HOTEL</a>
            </li>
            <li role="presentation" id="li-rental-tab">
                <a href="#tab" aria-controls="tab" role="tab" data-toggle="tab" id="rental-tab">CAR RENTAL</a>
            </li>
        </ul>
    
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <form action="" method="POST" class="form-horizontal" role="form">
                    <br/>
                        <div class="form-group">
                              <div class="row">
                                <select name="" id="input" class="form-control" required="required">
                                    <option value="hotel">-- Select Hotel --</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                               <div class="row">
                                       <div class='input-group date' id='datetimepicker2'>
                                          <input type='text' class="form-control" placeholder="Check-in Date"/>
                                        <span class="input-group-addon">
                                               <span class="glyphicon glyphicon-calendar"></span>
                                         </span>
                                    </div>
                             </div>
                        </div>

                        <div class="form-group">
                               <div class="row">
                                       <div class='input-group date' id='datetimepicker2'>
                                          <input type='text' class="form-control" placeholder="Check-out Date"/>
                                        <span class="input-group-addon">
                                               <span class="glyphicon glyphicon-calendar"></span>
                                         </span>
                                    </div>
                             </div>
                        </div>

                        <div class="form-group">
                              <div class="row">
                                <select name="" id="input" class="form-control" required="required">
                                    <option value="guests">-- Guests --</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row" id="panel-btn-submit">
                                <center>
                                    <button type="submit" class="btn btn-primary" id="submit-btn">CHECK NOW</button>
                                </center>
                            </div>
                        </div>
                </form>
            </div>
            
            <div role="tabpanel" class="tab-pane" id="tab">
                Bạn tự làm nhé 
            </div>
        </div>
    </div>
</body>
</html>

Mình làm cho bạn rồi nè , cũng nhanh thôi nha ^^~ , tuy nhiên có chút khác bạn yêu cầu bạn tự chỉnh lại nhé .

Võ Hoài Nam viết 21:30 ngày 30/09/2018

Ẹc… hạn chế đăng source code giải bài giùm… Kẻo qua môn nhưng hổng có đọng lại gì trong đầu…

// Đừng có dùng ID để làm selector trong CSS.

Nguyễn Hữu Quyền viết 21:29 ngày 30/09/2018

Ok bạn , mình chuyên lập trình back-end nên không giỏi vụ này cho lắm, bạn góp ý và chỉnh lại trên code của mình đề mình lấy kinh nghiệm nhé ^^~

Kien Bach viết 21:32 ngày 30/09/2018

Cảm ơn bạn đăng code. Đúng là thật ra ko nên cho code nhưng đó là với người mới học thôi. Mình thì năm css và html khá là chắc rùi . H chỉ là ko bik nhiều class trong bootraps thôi. Ví dụ như thầy vì

                   <div class='input-group date' id='datetimepicker2'>
                      <input type='text' class="form-control" placeholder="Check-out Date"/>
                    <span class="input-group-addon">
                           <span class="glyphicon glyphicon-calendar"></span>

Để ra dc cái calendar đẹp thì code css mỏi tay. Nhưng mà học bootraps chủ yếu phải bik được dùng class nào đẻ ra chứ học bootraps ko phải là lúc học css nữa. Sau khi đi làm miễn là hiểu được để có thể thay đổi theo ý khách hàng.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Kien Bach

0 chủ đề

0 bài viết

Tác giả nổi bật