বুটস্ট্র্যাপ 3-এ ন্যাবারে আইকন সহ একটি অনুসন্ধান বাক্স কীভাবে যুক্ত করবেন?

Question

আমি নতুন টুইটার বুটস্ট্র্যাপ 3 ব্যবহার করছি এবং উপরের ন্যাবারে এটির নীচে (নীচে) একটি অনুসন্ধান বাক্স রাখার চেষ্টা করছি :

বুটস্ট্র্যাপ 2 এ এটি করা যেতে পারত:

<form class="form-search" method="get" id="s" action="/">
    <div class="input-append">
        <input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
        <button type="submit" class="add-on"><i class="icon-search"></i></button>
    </div>
</form>

তবে আমি নিশ্চিত না যে কীভাবে বুটস্ট্র্যাপ 3 তে একই উত্পাদন করা যায় যতটা পরিবর্তন হয়েছে।

বুটস্ট্র্যাপ 3-এ ন্যাবার সন্ধান বক্স ফর্মের জন্য ডিফল্ট এইচটিএমএল হ'ল:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

আমার যা প্রয়োজন তা অর্জন করতে আমি কীভাবে এটি সংশোধন করব?

Comments

নেভিগেশন বারে দরকারী বুটস্ট্র্যাপ অনুসন্ধানের বাক্স ডিজাইনার্স্লাইব.কম /

— navbar

পূর্ণ-প্রস্থের অনুসন্ধানের ইনপুট বুটস্ট্র্যাপ 4, এই উত্তরটি দেখুন

— জিম

Answer 1

আমি কোনও বিএস সাইটে বিএস 3 চালিয়ে যাচ্ছি এবং নিম্নলিখিতগুলির দ্বারা আপনি অনুরোধ করছেন এমন প্রভাব / লেআউট উত্পাদন করে। অবশ্যই আপনার BS3 এ সেট আপ গ্লাইফিকন প্রয়োজন।

<div class="navbar navbar-inverse navbar-static-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
    </div>

    <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav">
            <li><a href="/topic/notes/">/notes</a></li>
            <li><a href="/topic/dev/">/dev</a></li>
            <li><a href="/topic/good-reads/">/good-reads</a></li>
            <li><a href="/topic/art/">/art</a></li>
            <li><a href="/topic/bookmarks/">/bookmarks</a></li>
            <li><a href="/all-topics/">/all</a></li>
        </ul>

        <div class="col-sm-3 col-md-3 pull-right">
        <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

    </div>
</div>

আপডেট: জেএসফিডল দেখুন

Comments

এটি অনুসন্ধান বাক্সটিকে আমার মতো দেখতে চেহারা দেয়, তবে নাবারটিকে ভেঙে দেয়। অনুসন্ধান বাক্স এবং তদ্বিপরীত ভেঙে আমি এটি ঠিক করতে পারিনি। : -: / এখানে একটি স্ক্রিনশট এর i.stack.imgur.com/vTfvX.png

— its_me

@its_me: এটি আপনার জন্য কেন ভেঙে যায় তা আমি নিশ্চিত নই। আমি এটি পোস্ট করার আগে এটি কোনও লাইভ সাইটে পুরোপুরি পরীক্ষা করেছি। আপনি যেখানে এটি সন্নিবেশ করছিলেন সম্ভবত এটি সেখানে। আমি যে পূর্ণ এনএভি বার কোডটি ব্যবহার করছি তা দিয়ে উত্তরটি আপডেট করব। ব্যক্তিগতভাবে আমি অনুসন্ধান ফর্মটি ডান সারিবদ্ধ করার পরামর্শ দিচ্ছিলাম তবে এটি আপনার উপর নির্ভর করে to

— ফিল নিকোলাস

ফিল, আমি পরীক্ষার জন্য কোনও লাইভ সাইট পাই নি। সুতরাং, আমি এখানে অফিসিয়াল বুটস্ট্র্যাপ সাইটে উদাহরণটি প্রতিস্থাপন করে এটি পরীক্ষা করছি: getbootstrap.com/compferences/#navbar - আপনি যদি চেষ্টা করতে চান তবে দয়া করে করুন, বা আমার সাইটটি শেষ হলে আমি আবার যাচাই করব এবং আপনাকে জানাতে। সাহায্য করার চেষ্টা করার জন্য ধন্যবাদ। +1

— এর_ম

আমি আপনার ফিডলকে কাঁটাচামচ করেছি এবং এটি টুইট করেছি: জেএসফিডাল বোতাম অ্যাডনদের জন্য বিএস 3 ডক্সের উপর ভিত্তি করে আমি মনে করি আপনি এটি সবচেয়ে ভাল যাচ্ছেন। নোট করুন যে আমি অ-দৃশ্যমান ক্ষেত্রের লেবেলটি সরিয়েছি, যা বাম পাশের কোণার ব্যাসার্ধকে ফিরিয়ে দিয়েছে। আমি আবার উত্তর কোড আপডেট করব।

— ফিল নিকোলাস

আমি যে সহজ ছেড়ে না। আমি ফিডল আপডেট করেছি এবং এটি IE10, ফায়ারফক্স এবং Chrome পরীক্ষা করেছি। পাঠ্য ক্ষেত্রের প্রস্থ উইন্ডো প্রস্থের সাথে একটি টোডকে পৃথক করে, তবে আমি মনে করি এটি আপনি যা খুঁজছেন তার প্রভাব রয়েছে।

— ফিল নিকোলাস

Answer 2

এটি কোনও কাস্টম সিএসএস যোগ না করেই আমি পেতে পারি (এটি প্রশ্ন জিজ্ঞাসার সময় হিসাবে আমি ইতিমধ্যে বুঝতে পেরেছি; অনুমান করুন যে আমি এটির সাথে আটকে থাকব):

এবং ব্যবহৃত মার্কআপ:

<form class="navbar-form navbar-left" role="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
    </button>
</form>

পিএস: অবশ্যই, margin-leftএটি বোতামে নেতিবাচক (-4px) যুক্ত করে, এবং border-radiusপাশের দিকগুলি সরিয়ে inputএবং buttonমিলিত করে ঠিক করা যেতে পারে। তবে এই প্রশ্নের পুরো বিষয়টি হ'ল এটি কোনও কাস্টম সিএসএস ছাড়াই কাজ করা।

Answer 3

আপনি বুটস্ট্র্যাপ 3 থেকে বিভাগযুক্ত বোতাম উদাহরণ ব্যবহার করতে পারেন:

<form action="" class="navbar-form navbar-right">
   <div class="input-group">
       <input type="Search" placeholder="Search..." class="form-control" />
       <div class="input-group-btn">
           <button class="btn btn-info">
           <span class="glyphicon glyphicon-search"></span>
           </button>
       </div>
   </div>
</form>

Answer 4

আমি ফিলিচ্ছিলসের কোডটি চেষ্টা করেছিলাম এবং @its_me এর একই সমস্যাটি মন্তব্যগুলিতে বলেছিলাম যে অনুসন্ধান বারটি নাবারের পরবর্তী লাইনে প্রদর্শিত হবে এবং আমি খুঁজে পেয়েছি যে formএকটি বৈশিষ্ট্য যুক্ত করা দরকার width।

<form role="search" style="width: 15em; margin: 0.3em 2em;">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </div>
    </div>
</form> 

Comments

বন্ধ, আমি খুঁজে পেলাম যে ইনপুট-গ্রুপে আমার প্রস্থ যুক্ত করা দরকার। <div class="input-group" style="width:15em;">

— স্টিভ আইনন

Answer 5

এটি আমার ওয়েবসাইটের জন্য আমি প্রয়োগ করেছি, যদি কেউ মেনু আইটেমটির বেশি না পেয়ে থাকে এবং দীর্ঘতর অনুসন্ধান বার এটি ব্যবহার করতে পারে

কোডটি এখানে

       <style>
        .navbar-inverse .navbar-nav > li > a {
            color: white !important;
        }

            .navbar-inverse .navbar-nav > li > a:hover {
                text-decoration: underline;
            }

        .navbar-collapse ul li {
            padding-top: 0px;
            padding-bottom: 0px;
        }

            .navbar-collapse ul li a {
                padding-top: 0px;
                padding-bottom: 0px;
            }

        .navbar-brand img {
            width: 200px;
            height: 40px;
        }

        .navbar-inverse {
            background-color: #3A1B37;
        }
    </style>
   <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/">
                    <img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"></a>
                <div class="col-md-6 col-sm-8 col-xs-11 navbar-left">
                    <div class="navbar-form " role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" style="max-width: 100%; width: 100%;">
                            <div class="input-group-btn">
                                <button class="btn btn-default" style="background: rgb(72, 166, 72);" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="navbar-brand  visible-md visible-lg visible-sm" style="visibility: hidden;" runat="server">
                        <img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin" />
                    </li>
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                    <li><a runat="server" href="~/">Somthing</a></li>
                    <li><a runat="server" href="~/">Somthing</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a runat="server" href="~/Account/Register">Register</a></li>
                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                </ul> </div>

        </div>
    </div>

Answer 6

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>3 Col Portfolio - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" name="keyword" placeholder="search..." class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">Go</button>
                        </span>
                    </div>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
            <div class="col-md-3 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x400" alt="">
                </a>
                <h3>
                    <a href="#">Project Name</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">&laquo;</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <h3>About</h3>
                    <ul>
                        <li>
                            <i class="glyphicon glyphicon-home"></i> Your company address here
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-earphone"></i> 0982.808.065
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-envelope"></i> [e-mail]
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-flag"></i> <a href="#">Fan page</a>
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-time"></i> 08:00-18:00 Monday to Friday
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <h3>Support</h3>
                    <ul>
                        <li>
                            <a href="#" class="link">Terms of Service</a>
                        </li>
                        <li>
                            <a href="#" class="link">Privacy policy</a>
                        </li>
                        <li>
                            <a href="#" class="link">Warranty commitment</a>
                        </li>
                        <li>
                            <a href="#" class="link">Site map</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4">
                    <h3>Other</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </footer>

    <!-- /.container -->

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>