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. scrapy 改 scrapy-redis

    1.spider 修改 class CgysSpider(scrapy.Spider): name = 'clispider' start_urls = ['https://search.bilibi ...

  2. USACO Slowing down

    洛谷 P2982 [USACO10FEB]慢下来Slowing down 洛谷传送门 JDOJ 2684: USACO 2010 Feb Gold 3.Slowing down JDOJ传送门 Des ...

  3. hdu6222——佩尔方程&&大数__int128

    题意 给定一个整数 $N$($1 \leq N \leq 10^{30}$),求最小的整数 $t$,要求 $t \geq N$,使得边长为 $t-1, t, t+1$ 的三角形面积为整数. 分析 根据 ...

  4. 第05组 Beta冲刺(3/4)

    第05组 Beta冲刺(3/4) 队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了哪 ...

  5. opencv获取网络相机的图像-不用sdk

    海康相机 优点:不用sdk直接网络获取 缺点:速度有1-2秒的延迟 使用型号 1280*680分辨路 #include <iostream> #include<opencv2/ope ...

  6. STL——list用法总结

    头文件 #include<list> 声明一个int型的list:list<int> a: 1.list的构造函数 list<int>a{1,2,3} list&l ...

  7. 2019-2020-1 20181218《Linux内核原理与分析》第一周作业

    目录 问题和参考 有趣/有用的Linux命令 小作业和解答 一些图片 相关学习 本文是学习Linux基础入门(新版)后的总结. 问题和参考 虚拟机莫名崩溃,一天重启了几十次电脑,重装两次系统,心累.想 ...

  8. linux 系统时间 EST CST

    早上本来要做一些实验的,基于时间的.date 查看时间,发现时间不对.用 pool.ntp.org 去同步发现时间还是一样的,并且没有报错.如是开启另外一台时间对的linux服务器进行对比.发现一个是 ...

  9. 使用vue搭建应用六实现登录页

    1.js_cookie js-cookie插件是一个JS操作cookie的插件 安装 yarn add js-cookie 使用 写入 Cookies.set('name', 'value'); 读取 ...

  10. 3 Linux性能优化之 CPU上下文