生活随笔
收集整理的這篇文章主要介紹了
bootstrap组件的案例代码
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
運(yùn)行結(jié)果如圖所示：
代碼如下所示：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /><title></title><link href="css/bootstrap.css" rel="stylesheet" /><style type="text/css">.text{display: block;}.mylist{height: 42px;background: rgb(244,243,254,0.69);border: 1px solid #CCCCCC;}</style></head><body>1.小圖標(biāo)：<br /><div class="container"><div class="row text-center mylist"><div class="col-xs-3"><span class="glyphicon glyphicon-home"></span><span class="text">首頁(yè)</span></div><div class="col-xs-3"><span class="glyphicon glyphicon-zoom-in"></span><span class="text">服務(wù)</span></div><div class="col-xs-3"><span class="glyphicon glyphicon-gift"></span><span class="text">商品</span></div><div class="col-xs-3"><span class="glyphicon glyphicon-user"></span><span class="text">我的聯(lián)通</span></div></div></div>2.下拉菜單：<br /><div class="dropdown open"><button class="btn btn-default" data-toggle="dropdown">下拉列表<span class="caret"></span></button><ul class="dropdown-menu"><li class="active"><a href="#">No.1</a></li><li ><a href="#">No.2</a></li><li ><a href="#">No.3</a></li><li class="divider"></li><li ><a href="#">No.4</a></li></ul></div>3.分離式的下拉列表<br /><div class="btn-group"><button class="btn btn-danger">Action</button><button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu"><li class="active"><a href="#">No.1</a></li><li ><a href="#">No.2</a></li><li ><a href="#">No.3</a></li><li class="divider"></li><li ><a href="#">No.4</a></li></ul></div>4.輸入框：<br /><div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="姓名" /></div><div class="input-group"><input type="text" class="form-control" placeholder="請(qǐng)輸入要搜索的內(nèi)容" /><span class="input-group-addon">百度一下</span></div>5.按鈕作為addon<br /><div class="input-group"><input type="text" class="form-control" placeholder="請(qǐng)輸入要搜索的內(nèi)容" /><span class="input-group-btn"><button class="btn btn-danger">百度一下</button></span></div>6.導(dǎo)航和導(dǎo)航條：<br />選項(xiàng)卡導(dǎo)航：<br /><ul class="nav nav-tabs"><li class="active"><a href="#">主頁(yè)</a></li><li><a href="#">微博</a></li><li><a href="#">圖書</a></li><li><a href="#">關(guān)于我們</a></li></ul><br />膠囊式選項(xiàng)卡導(dǎo)航：<br /><ul class="nav nav-pills"><li class="active"><a href="#">主頁(yè)</a></li><li><a href="#">微博</a></li><li><a href="#">圖書</a></li><li><a href="#">關(guān)于我們</a></li></ul>自適應(yīng)導(dǎo)航：<br /><ul class="nav nav-pills nav-justified"><li class="active"><a href="#">主頁(yè)</a></li><li><a href="#">微博</a></li><li><a href="#">圖書</a></li><li><a href="#">關(guān)于我們</a></li></ul><br />二級(jí)導(dǎo)航：<br /><ul class="nav nav-pills"><li class="active"><a href="#">首頁(yè)</a></li><li><a href="#">圖片</a></li><li><a href="#">個(gè)人</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">其他<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">收藏</a></li><li><a href="#">關(guān)于我們</a></li><li><a href="#">聯(lián)系賣家</a></li><li><a href="#">退換貨</a></li></ul></li></ul>導(dǎo)航條：<br /><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a href="#" class="navbar-brand">LOGO</a></div><ul class="nav navbar-nav"><li class="active"><a href="#">主頁(yè)</a></li><li><a href="#">微博</a></li><li><a href="#">圖書</a></li></ul></nav>導(dǎo)航條中的表單：<br /><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a href="#" class="navbar-brand">LOGO</a></div><ul class="nav navbar-nav"><li class="active"><a href="#">主頁(yè)</a></li><li><a href="#">微博</a></li><li><a href="#">圖書</a></li></ul><form role="Serach" class="navbar-form navbar-right" action="" method="post"><div class="form-group"><input type="text" class="form-control" placeholder="Serach" /></div> <input type="submit" class="btn btn-primary" value="搜索"/></form></nav>導(dǎo)航欄中的文本：<br /><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><a href="#" class="navbar-brand">LOGO</a></div><ul class="nav navbar-nav"><p class="navbar-text">文字</p></ul></nav>頂部固定或底部固定<br /><nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"><div class="navbar-header"><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><span class="icon-bar"></span></button><a href="#" class="navbar-brand">LOGO</a></div><div class="collapse navbar-collapse navbar-left"><ul class="nav navbar-nav"><li class="active"><a href="#">首頁(yè)</a></li><li><a href="#">圖書</a></li><li><a href="#">作品</a></li><li><a href="#">展覽</a></li><li><a href="#">關(guān)于我們</a></li></ul></div></nav>縮略圖：<br /><div class="container"><div class="row"><div class="col-md-2 col-xs-6"><a class="thumbnail" href="#"><img src="img/logo.png"/></a><a class="thumbnail" href="#"><img src="img/logo.png"/></a><a class="thumbnail" href="#"><img src="img/logo.png"/></a><a class="thumbnail" href="#"><img src="img/logo.png"/></a><a class="thumbnail" href="#"><img src="img/logo.png"/></a></div></div></div><script type="text/javascript" src="js/jquery-1.12.4.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的bootstrap组件的案例代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
