< form > < div class = " input-group mb-3 " > < span class = " input-group-text " > @ </ span > < input type = " text " class = " form-control " placeholder = " Username " > </ div > < div class = " input-group " > < input type = " text " class = " form-control " placeholder = " Your Email " > < span class = " input-group-text " > @yssmx.com </ span > </ div > </ form >

< div class = " input-group mb-3 input-group-sm " > < span class = " input-group-text " > Small </ span > < input type = " text " class = " form-control " > </ div > < div class = " input-group mb-3 " > < span class = " input-group-text " > Default </ span > < input type = " text " class = " form-control " > > </ div > < div class = " input-group mb-3 input-group-lg " > < span class = " input-group-text " > Large </ span > < input type = " text " class = " form-control " > </ div >

<!-- 多个输入框 --> < div class = " input-group mb-3 " > < span class = " input-group-text " > Person </ span > < input type = " text " class = " form-control " placeholder = " First Name " > < input type = " text " class = " form-control " placeholder = " Last Name " > </ div > <!-- 多个文本信息 --> < div class = " input-group mb-3 " > < span class = " input-group-text " > One </ span > < span class = " input-group-text " > Two </ span > < span class = " input-group-text " > Three </ span > < input type = " text " class = " form-control " > </ div >

< div class = " input-group mb-3 " > < div class = " input-group-text " > < input type = " checkbox " > </ div > < input type = " text " class = " form-control " placeholder = " yssmx " > </ div > < div class = " input-group mb-3 " > < div class = " input-group-text " > < input type = " radio " > </ div > < input type = " text " class = " form-control " placeholder = " GOOGLE " > </ div >

< div class = " input-group mb-3 " > < button class = " btn btn-outline-primary " type = " button " > Basic Button </ button > < input type = " text " class = " form-control " placeholder = " Some text " > </ div > < div class = " input-group mb-3 " > < input type = " text " class = " form-control " placeholder = " Search " > < button class = " btn btn-success " type = " submit " > Go </ button > </ div > < div class = " input-group mb-3 " > < input type = " text " class = " form-control " placeholder = " Something clever.. " > < button class = " btn btn-primary " type = " button " > OK </ button > < button class = " btn btn-danger " type = " button " > Cancel </ button > </ div >

< div class = " input-group mt-3 mb-3 " > < button type = " button " class = " btn btn-primary dropdown-toggle " data-bs-toggle = " dropdown " > 选择网站 </ button > < ul class = " dropdown-menu " > < li > < a class = " dropdown-item " href = " https://www.google.com " > GOOGLE </ a > </ li > < li > < a class = " dropdown-item " href = " https://www.yssmx.com " > yssmx </ a > </ li > < li > < a class = " dropdown-item " href = " https://www.taobao.com " > TAOBAO </ a > </ li > </ ul > < input type = " text " class = " form-control " placeholder = " 网站地址 " > </ div >

< form > < label for = " demo " > 这里输入您的邮箱: </ label > < div class = " input-group mb-3 " > < input type = " text " class = " form-control " placeholder = " Email " id = " demo " name = " email " > < span class = " input-group-text " > @yssmx.com </ span > </ div > </ form >