Beego 学习笔记9：Boostrap使用介绍
2024-06-07 18:50:49
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控件的使用
转载于:https://www.cnblogs.com/tudaogaoyang/p/7999598.html
Beego 学习笔记9：Boostrap使用介绍相关推荐
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- C语言学习笔记---001C语言的介绍,编译过程原理,工具等
C语言学习笔记---001C语言的介绍,编译过程原理,工具等 创梦技术交流平台:资源下载,技术交流,网络赚钱: 交流qq群:1群:248318056 2群:251572072 技术交流平台:cre.i ...
- ESP32学习笔记(一) 芯片型号介绍
ESP32学习笔记(一) 芯片型号介绍 目录: ESP32学习笔记(一) 芯片型号介绍 ESP32学习笔记(二) 开发环境搭建 VSCode+platformio ESP32学习笔记(三) 硬件资源介 ...
- STM32 HAL库学习笔记2 HAL库介绍
STM32 HAL库学习笔记2 HAL库介绍 CMSIS标准 一.再次认识HAL库 HAL库设计思想 HAL库实现方式 以GPIO模块为例 GPIO外设数据类型 GPIO外设接口函数 二.使用HAL库 ...
- 阿里大神最佳总结Flutter进阶学习笔记，技术详细介绍
开头 很多人工作了十年,但只是用一年的工作经验做了十年而已. 高级工程师一直是市场所需要的,然而很多初级工程师在进阶高级工程师的过程中一直是一个瓶颈. 移动研发在最近两年可以说越来越趋于稳定,因为越来 ...
- SAR学习笔记后续-phased工具箱介绍
摘要 <SAR学习笔记-代码部分>主要介绍了目标检测.一维距离像.二维距离像以及SAR成像的RDA算法等编程实现过程.这篇论文承接上篇内容,主要介绍MATLAB中phased工具箱. 文章 ...
- 学习笔记 | 内生性全面介绍
一直以来,对内生性的理解都是似懂非懂,就像是蒙着一层黑纱,哈哈~ 所以,今天上午把关于内生性的知识认真地看了一遍,梳理了一遍,总结一下,方便后面学习. 内容包括三大块:内生性来源.解决.典型例子 主要 ...
- 影像组学视频学习笔记(27)-SimpleITK包介绍、Li‘s have a solution and plan.
本笔记来源于B站Up主: 有Li 的影像组学的系列教学视频 本节(27)主要讲解: 功能强大的图像处理工具SimpleITK包 视频中李博士演示了SimpleITK的两个基本功能:图像格式转换以及图像 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
最新文章
- swift 数组高阶使用(一)
- 小程序---canvas画图，生成分享图片，画图文字换行
- php中 param,php中bind_param()函数用法分析
- 给定数组 求和等于固定值 算法_别人家的面试题：不可变数组快速范围求和
- run()方法和start()方法测试解析
- 工作97:父子组件传值
- 操作系统进程学习(Linux 内核学习笔记)
- Linux设备模型(4)_sysfs
- 3.1Python数据处理篇之Numpy系列(一)---ndarray对象的属性与numpy的数据类型
- bzoj2763：最短路
- nginx的配置总结
- Dxg——python MicroPython 开发笔记整理分类合集【所有的相关记录，都整理在此】
- C语言：复制线性链表（递归）算法
- 【上网】微信能上网，谷歌浏览器上不了网，怎么解决？
- 医院患者随访工作信息化建设可行性报告
- java连接redis设置密码_jedis设置密码连接Redis
- CISCO 思科2960G CONSOLE口越过登陆账号密码访问
- 机器学习 K近邻之KD树基本概念、绘制KD树
- 如何用javaweb实现网上招聘系统、基于SSM+mysql的校园大学生兼职招聘平台
- Fliqo 因FlashPlayer EOL不支持 - 不能使用，怎么办？