设为首页 加入收藏

TOP

Beego 学习笔记9:Boostrap使用介绍(一)
2017-12-11 09:18:51 】 浏览:89
Tags:Beego 学习 笔记 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/java script" src="/static/js/jquery-2.1.1.min.js"></script> 
<script type="text/java script" 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>
首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇GO学习——安装编译(1) 下一篇golang关于一些新手不注意会出现..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目