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控件的使用
Beego 学习笔记9：Boostrap使用介绍的更多相关文章
- Beego学习笔记——Logs
日志处理 这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...
- Beego学习笔记——开始
beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...
- Beego学习笔记——Config
配置文件解析 这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...
- Beego学习笔记
Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...
- Beego 学习笔记15：布局页面
页面布局 1> 一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2> ...
- Beego 学习笔记14：Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
- Python学习笔记—Python基础1 介绍、发展史、安装、基本语法
第一周学习笔记: 一.Python介绍 1.Python的创始人为吉多·范罗苏姆.1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...
- 《精通并发与Netty》学习笔记（01 - netty介绍及环境搭建）
一.Netty介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. ...
- [原创]java WEB学习笔记43：jstl 介绍，core库详解：表达式操作，流程控制，迭代操作，url操作
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
随机推荐
- python相关资源
http://blog.csdn.net/ken_wanglin/article/details/53095967 http://www.infoq.com/cn/articles/Python-wr ...
- opencart 3伪静态seo url设置教程
opencart 3已经为我们做好了url伪静态功能,我们只要做一些简单的设置就能实现seo url,首先开启伪静态功能,看看文件.htaccess事发后有存在如下规则,如果没有需要先添加下面的代码 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- 防御流类型的xss攻击
1.建立一个工具类 package im.lsn.oss.exhibition.utils; import org.apache.commons.lang3.StringUtils; import j ...
- html2canvas@^1.0.0-rc.1
这个版本的html2canvas是我在npm找到的,有严重问题,如截图后字体变小,解决方法就是官网找个min.js的版本,放到项目中引用就好 https://html2canvas.hertzen.c ...
- I/O管理杂记
这是一篇杂记,记录了操作系统层面与I/O管理的零散知识点,用于温习使用.由于I/O管理是一个很大的范畴,后续会不断按照自己的生产需求来补充用的到的知识点.计算机系统是人造系统,没有绝对的对错(相对于自 ...
- 这次是真的换新blog了！
zlycerqan.xyz zlycerqan.xyz 好麻烦啊...不搞啦...溜辣溜辣 博客又不咕咕咕啦 .
- js中的自动包装机制
有一行语句: 1.toString() //error 那么问题来了,为什么报错? 我的第一想法就是1是一个基本类型,所以它没有toString方法 嗯,理直气壮 接下来有大佬show me code ...
- Git-push和pull分支
查看分支信息:git branch -r 查看所有分支信息:git branch -a 本地推送分支:git push origin branch-name 推送分支前最好先pull分支:git pu ...
- SKF密码设备研究
SKF介绍 SKF接口是国密标准中智能密码钥匙的C语言应用开发接口标准,目前很多国内密码密码设备厂商都为其产品提供了SKF接口的开发包.开发者可以通过统一的SKF接口开发密码应用,访问来自不同设备供应 ...