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. Java多线程编程核心技术-第1章-Java多线程技能-读书笔记

    第 1 章 Java 多线程技能 本章主要内容 线程的启动 如何使线程暂停 如何使线程停止 线程的优先级 线程安全相关的问题 1.1 进程和多线程的概念及线程的优点 进程是操作系统结构的基础:是一次程 ...

  2. 新版Notepad++加十六进制查看的插件HexEditor（转载+总结）

    用到hex文件查看,老版本的notepad++是可以安装的,新版本的是安装不了,这个差评啊, 但是网上有方法:https://github.com/chcg/NPP_HexEdit/releases下 ...

  3. selenium send_keys慢，卡，怎么办？这里有你想要的解决方案

    相信各位看官在用selenium时,会发现发送长字符时,一个字符一个字符在输入,特别在使用chrome时,更加明显. 如果你的网页是要大量编辑的怎么处理呢? 一.send_keys机制 既然问题出来了 ...

  4. VIJOS-P1320 清点人数

    JDOJ 1427: VIJOS-P1320 清点人数 题目传送门 Description 初始时,火车上没有学生:当同学们开始上火车时,年级主任从第一节车厢出发走到最后一节车厢,每节车厢随时都有可能 ...

  5. java 多态（向上转型）

    多态的定义与使用格式 多态的定义格式:就是父类的引用变量指向子类对象 父类类型  变量名 = new 子类类型(); 变量名.方法名(); 普通类多态定义的格式 父类 变量名 = new 子类(); ...

  6. Flask视图之CBV示列

    from flask import views, Flask app=Flask(__name__) class loginview( views.MethodView ):   # 继承views. ...

  7. selenium--获取HTML源码断言和URL地址

    获取HTML源码 from selenium import webdriver import unittest class Test_source(unittest.TestCase): def Te ...

  8. Test of String

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

  9. Win10,Anaconda,tensorflow-gpu安装教程

    ,参考于:https://www.cnblogs.com/guoyaohua/p/9265268.html 目录 前言 第一步:安装Anaconda 1.下载和安装 2.配置Anaconda环境变量 ...

  10. c# word 插入图片问题

    情景描述: 在之前文本框中加标签,代码直接addPicture出现了意外.不起作用,怀疑是文档模板的问题,因为生成的PDF和word格式总时不时有差异,左右捣鼓下,更换文本框,更换图片形式,形状形式, ...