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

#1

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

#2

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

#3 
<!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>

form-daynhauhoc.com.jpg1297×704 165 KB

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é .

1 Like
#4

Ẹ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.

#5

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é ^^~

1 Like
#6

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.

#7

Nguyễn Hữu Quyền giao diện của bạn không thay đổi theo thiết bị

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?