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. Memcache未授权访问漏洞简单修复方法

    漏洞描述: memcache是一套常用的key-value缓存系统,由于它本身没有权限控制模块,所以开放在外网的memcache服务很容易被攻击者扫描发现,通过命令交互可直接读取memcache中的敏 ...

  2. CPU中断的工作原理，从最底层讲起

    前言 中断的概念属于硬件层.虽然我们在进行软件编程时不会直接使用中断,但理解它对我们来说依然重要. 我们在使用线程切换及状态管理.异常处理.硬件与处理器的交互.I/O操作等指令时,中断都在默默的为我们 ...

  3. Test of String

    1.前言 这是我出的第一套题目,话说感觉有点晚了,还是在向总安排下出的.我被安排的是字符串方面的内容,这应该相对而言是比较小众的知识点吧,但是一样的有作用的,也有很神的题目.所谓是NOIP模拟题,其实 ...

  4. android studio 修改选中内容背景色，以及匹配的内容背景色

    #与选中内容匹配的内容背景色Editor -> Color Scheme -> General -> Code -> Identifier under caret #选中内容前 ...

  5. python爬虫实例——爬取歌单

    学习自<<从零开始学python网络爬虫>> 爬取酷狗歌单,保存入csv文件 直接上源代码:(含注释) import requests #用于请求网页获取网页数据 from b ...

  6. logstash设置开机自启动

    本篇文件前提是在centos7.6上使用rpm包安装的logstash,添加systemd方式启动. #默认为rpm包安装,进行执行目录 cd /usr/share/logstash/bin/ #系统 ...

  7. 新添加的用户无法sudo解决方案

    问题:xxx(用户名) is not in the sudoers file. This incident will be reported. 用户管理: 1.创建用户 (1)方法1 $ sudo a ...

  8. Jenkins-slave 镜像集成 docker 和 kubectl

    1.说明 对官方的 jenkins/jnlp-slave 镜像集成 docker 和 kubectl 命令. 2.Dockerfile 文件 该镜像底层采用的是 Debian 系统,先更改下载源,然后 ...

  9. [原创]K8tools 20191111/K8工具合集

    K8tools 20191111 声明: 工具仅供安全研究或授权渗透,非法用途后果自负. 下载: https://github.com/k8gege/K8tools PS: 不定期更新,文件比较大,可 ...

  10. 爬虫框架 ---- scrapy 框架的介绍与安装

    -----  爬虫 基于B/S 模式的数据采集技术,按照一定的规则,自动的抓取万维网信息程序 以一个或多个页面为爬取起点,从页面中提取链接实现深度爬取 使用爬虫的列子 第三方抢票软件(360/猎豹/ ...