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使用介绍的更多相关文章

  1. Beego学习笔记——Logs

    日志处理 这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...

  2. Beego学习笔记——开始

    beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...

  3. Beego学习笔记——Config

    配置文件解析 这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...

  4. Beego学习笔记

    Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...

  5. Beego 学习笔记15：布局页面

    页面布局 1>     一个html页面由:head部分,body部分,内部css,内部js,外联css,外联的js这几部分组成.因此,一个布局文件也就需要针对这些进行拆分. 2>     ...

  6. Beego 学习笔记14：Session控制

    Session控制 1>     Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2>     Beego框架内置了 session 模块,目前 ...

  7. Python学习笔记—Python基础1 介绍、发展史、安装、基本语法

    第一周学习笔记: 一.Python介绍      1.Python的创始人为吉多·范罗苏姆.1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  8. 《精通并发与Netty》学习笔记（01 - netty介绍及环境搭建）

    一.Netty介绍     Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序.     ...

  9. [原创]java WEB学习笔记43：jstl 介绍，core库详解：表达式操作，流程控制，迭代操作，url操作

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  10. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

随机推荐

  1. GrowingIO配置

    一.什么是UTM参数UTM是一套标准的跟踪渠道流量的参数,你可以通过它来跟踪访问你网站的流量来自于哪些渠道.哪些媒介等. 二.高级用法 UTM参数包括了utm_source在内的5个参数,分别是: 参 ...

  2. Koa帮我们做了什么

    整理web渲染思路,与KOA作比较 1.开启服务器并监听端口,注册监听事件 // 原生 let http = require('http') const server = http.createSer ...

  3. Linux stty命令

    stty是linux下改变和打印终端设置的常用命令. 一.参数: 1.打印终端行设置 -a,--all   以人可读的方式打印所有当前设置:-a参数比单独的stty命令输出的终端信息更详细 -g,-- ...

  4. css特效之旋转音乐播放器

    本次需要用到的知识点有: transform setInerval 怎么添加背景音乐我会在下一篇介绍 https://www.cnblogs.com/zouwangblog/p/11138734.ht ...

  5. nexus没有授权导致的错误

    错误详情信息: 错误信息: [ERROR] Failed to execute goal on project blog: Could not resolve dependencies for pro ...

  6. MySQL基础概念知多少

    MySQL基础概念相关的名词还是挺多的,比如3大范式.4种隔离界别.ACID.DQL.DML.DDL,还有redo.undo.binlog等,本文就统一整理下MySQL常见的基础概念,方便小伙伴们翻阅 ...

  7. Gamma阶段第十次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  8. Leetcode 初刷（1）

    1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  9. Eureka比Zookeeper好在哪里？

    Eureka遵守AP,Zookeeper遵守CP RDBMS(oracle/mysql.sqlServer) ====> ACID, 关系型数据库遵循ACID原则: NoSQL(redis/mo ...

  10. 【Python开发】anaconda3 安装python包

    环境说明 电脑配置:win7 64位 安装版本:anaconda3 Python 3.6 参考链接 http://python.jobbole.com/86236/ (链接中有一个小点介绍了如何加速包 ...