Beego 学习笔记9：Boostrap使用介绍
生活随笔
收集整理的這篇文章主要介紹了
Beego 学习笔记9：Boostrap使用介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
BootStrap布局
1>???? 下載地址: http://v3.bootcss.com/getting-started/#download
?
?
根據自己的需要，下載不同的版本。我這里使用的是1版本的。比較簡單好用。
2>???? Bootstrap常用的布局樣式介紹
1->布局容器（.container和.container-fluid）
2->柵格系統 （.col-xs-[1-12], .col-sm-[1-12], .col-md-[1-12]和.col-lg-[1-12]）
?
?
3->表單控件 （.form-group和.form-control）
4->按鈕樣式
?
?
5->按鈕的大小
?
?
6->圖片的形狀
?
?
3>???? 編寫頁面
?
<!DOCTYPE html> <html> <head> <title>首頁 - 用戶列表頁面</title> <link rel="shortcut icon" href="/static/img/favicon.png" /> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/> <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>? <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>? <style> .bodercss{ border: 1px solid #00f; } </style> </head>???? <body> <!--布局容器--> <div class="container" style="border:1px solid red"> <p>這是container布局</p> <p>.container 類用于固定寬度并支持響應式布局的容器。</p> </div> <div class="container-fluid" style="border:1px solid #0f0"> <p>container-fluid</p> <p>.container-fluid 類用于 100% 寬度，占據全部視口（viewport）的容器。</p> </div> <!--柵格布局部分--> <div class="container"> <div class="row"> <div class="col-md-1 bodercss">1</div> <div class="col-md-1 bodercss">2</div> <div class="col-md-1 bodercss">3</div> <div class="col-md-1 bodercss">4</div> <div class="col-md-1 bodercss">5</div> <div class="col-md-1 bodercss">6</div> <div class="col-md-1 bodercss">7</div> <div class="col-md-1 bodercss">8</div> <div class="col-md-1 bodercss">9</div> <div class="col-md-1 bodercss">10</div> <div class="col-md-1 bodercss">11</div> <div class="col-md-1 bodercss">12</div> </div> <div class="row"> <div class="col-md-2 bodercss">2</div> <div class="col-md-2 bodercss">4</div> <div class="col-md-2 bodercss">6</div> <div class="col-md-2 bodercss">8</div> <div class="col-md-2 bodercss">10</div> <div class="col-md-2 bodercss">12</div> </div> <div class="row"> <div class="col-md-3 bodercss">3</div> <div class="col-md-3 bodercss">6</div> <div class="col-md-3 bodercss">9</div> <div class="col-md-3 bodercss">12</div> </div> <div class="row"> <div class="col-md-4 bodercss">4</div> <div class="col-md-4 bodercss">4</div> <div class="col-md-4 bodercss">4</div> </div> <div class="row"> <div class="col-md-4 bodercss">4</div> <div class="col-md-8 bodercss">8</div> </div> <div class="row"> <div class="col-md-6 bodercss">6</div> <div class="col-md-6 bodercss">12</div> </div> <div class="row"> <div class="col-md-12 bodercss">12</div> </div> </div> <!--表單控件--> <div class="container"> <form> <div class="form-group"> <label for="text">文本:</label> <input type="text" class="form-control" id="text" placeholder="文本"> </div> <div class="form-group"> <label for="number">數字:</label> <input type="number" class="form-control" id="number" placeholder="數字"> </div> <div class="form-group"> <label for="datetime">時間:</label> <input type="datetime" class="form-control" id="datetime" placeholder="時間"> </div> <div class="form-group"> <label for="tel">電話:</label> <input type="tel" class="form-control" id="tel" placeholder="電話"> </div> <div class="form-group"> <label for="email">郵箱:</label> <input type="email" class="form-control" id="email" placeholder="郵箱"> </div> <div class="form-group"> <label for="password">密碼</label> <input type="password" class="form-control" id="password" placeholder="密碼"> </div> <div class="form-group"> <label for="exampleInputFile">上傳文件</label> <input type="file" id="exampleInputFile"> <p class="help-block">上傳文件</p> </div> <div class="checkbox"> <label> <input type="checkbox" id="blankCheckbox" value="option1" />多選A </label> <label> <input type="checkbox" id="blankCheckbox" value="option1"/>多選B </label> </div> <div class="radio"> <label> <input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>單選A </label> <label> <input type="radio" name="blankRadio" id="blankRadio1" value="option1"/>單選B </label> </div> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <button type="submit" class="btn btn-default">提交</button> <button type="reset" class="btn btn-primary">重置</button> </form> </div> <!--按鈕樣式--> <div class="container" style="margin-top:20px;"> <button type="button" class="btn btn-default">（默認樣式）Default</button> <button type="button" class="btn btn-primary">（首選項）Primary</button> <button type="button" class="btn btn-success">（成功）Success</button> <button type="button" class="btn btn-info">（一般信息）Info</button> <button type="button" class="btn btn-warning">（警告）Warning</button> <button type="button" class="btn btn-danger">（危險）Danger</button> <button type="button" class="btn btn-link">（鏈接）Link</button> </div> <!--圖片形狀--> <div class="container" style="margin-top:20px;"> <img src="/static/img/1.jpg" style="width:200px;height:200px;" class="img-rounded"> <img src="/static/img/2.jpg" style="width:200px;height:200px;" class="img-circle"> <img src="/static/img/3.jpg" style="width:200px;height:200px;" class="img-thumbnail"> </div> </body> </html>?
?
4>? ?運行頁面效果如下:
1->布局容器
?
2->柵格系統
?
3->Form表單
?
?
?4->按鈕樣式
5->圖片的樣式
6->下一章節，將Easyui控件的使用
?
?
?
轉載于:https://www.cnblogs.com/tudaogaoyang/p/7999598.html
總結
以上是生活随笔為你收集整理的Beego 学习笔记9：Boostrap使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python opencv3 检测人
- 下一篇： 怎样查看Jdk是32位还是64位