生活随笔
收集整理的這篇文章主要介紹了
bootstrap样式代码案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
運行結果如下所示：
代碼如下所示：
<!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">.container{border: 1px solid black;}.row{border: 1px solid black;}.row div{border:1px solid black;}#sjdis{width: 200px;height: 200px;background: red;}</style></head><body><div class="container"><div class="row"><div class="col-md-1">一等分</div><div class="col-md-1">一等分</div><div class="col-md-1 col-md-offset-1">一等分</div><div class="col-md-4 col-md-offset-3">一等分</div></div><div class="row"><div class="col-md-4">四等分</div><div class="col-md-8">八等分</div></div><div class="row"><div class="col-md-4"><div class="row"><div class="col-md-4">6等分</div><div class="col-md-6">6等分</div><div class="col-md-2">2等分</div></div></div><div class="col-md-4">四等分</div><div class="col-md-4">四等分</div></div></div><span class="h1">我是h1</span><span class="h2">我是h2</span><span class="h3">我是h3</span><span class="h4">我是h4</span><span class="h5">我是h5</span><span class="h6">我是h6</span><span class="lead">測試文字</span><br /><p class="text-left">左對齊</p><p class="text-right">右對齊</p><p class="text-center">居中對齊</p><p class="text-justify">兩端對齊</p><br />列表<ul class="list-inline"><li>首頁</li><li>崗位課</li><li>商城</li><li>關于我們</li></ul><br />表單：<form class="form-horizontal" action="" method="post"><div class="form-group"><span class="text-center col-sm-2">姓名：</span><div class="col-sm-10"><input type="text" class="form-control input-lg" /></div></div><div class="form-group">郵箱：<input type="email" class="form-control input-sm" /></div><input type="submit" class="form-control" value="提交"/></form><br />按鈕：<input type="button" class="btn btn-default" value="灰色" /><br /><input type="button" class="btn btn-primary" value="深藍色" /><br /><input type="button" class="btn btn-success" value="綠色" /><div id="sjdis"></div></body><script type="text/javascript" src="js/jquery-1.12.4.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script>
</html>
總結
以上是生活随笔為你收集整理的bootstrap样式代码案例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
