day60
Bootstrap
一、简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
二、安装
1、本地链接
2、CDN
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
三、布局容器
- 固定宽度:.container
- 流式布局:.container-fluid
四、响应式布局
- 超小屏幕:小于 768px
- 小屏幕:大于等于 768px
- 中等屏幕:大于等于 992px
- 大屏幕:大于等于 1200px
五、删格系统
1、概念
将父级可用宽度(content)均分为12等份
2、列比
- 超小屏幕:.col-xs-*
- 小屏幕:.col-sm-*
- 中等屏幕:.col-md-*
- 大屏幕:.col-lg-*
v-hint:只设置小屏列比会影响大屏列比;只设置大屏列比小屏时会撑满屏幕
3、行
<div class="row"></div>
...
<div class="row"></div>
4、列偏移
- 超小屏幕:.col-xs-offset-*
- 小屏幕:.col-sm-offset-*
- 中等屏幕:.col-md-offset-*
- 大屏幕:.col-lg-offset-*
六、辅助类
1、 情境背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
2、快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
3、快速清浮动
<div class="clearfix">...</div>
4、显隐
<div class="show">...</div>
<div class="hidden">...</div>
七、字体图标
<i class="glyphicon glyphicon-*"></i>
day60的更多相关文章
- day60——单表操作补充(批量插入、查询、表结构)
day60 批量插入(bulk_create) # bulk_create obj_list = [] for i in range(20): obj = models.Book( title=f'金 ...
- day60 django入门
目录 一.静态文件配置 1 引子 2 如何配置 1 在settins.py中的具体配置 2 静态文件的动态解析(html页面中) 二.request对象方法初识 三.pycharm链接数据库(mysq ...
- day60 pymysql
预知扩展内容,详见地址如下(关于数据库备份和恢复) http://www.cnblogs.com/linhaifeng/articles/7525619.html 我们一般写程序都是在py文件里面,那 ...
- python 全栈开发,Day60(MySQL的前戏,数据库概述,MySQL安装和基本管理,初识MySQL语句)
一.MySQL的前戏 在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码 root|123321 alex|123123 上面文件内容 ...
- 《从零开始学Swift》学习笔记(Day60)——Core Foundation框架
原创文章,欢迎转载.转载请注明:关东升的博客 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风 ...
- 《从零開始学Swift》学习笔记(Day60)——Core Foundation框架
创文章,欢迎转载.转载请注明:关东升的博客 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.尽管在Swift中调用这样的C语 ...
- Pyhton学习——Day60
Form组件 - form表单(验证:保留上次内容) - - Ajax(验证:无需上次内容) - 返回HttpResponse - 前端:跳转或错误信息 1. Form组件扩展: 1.简单扩展 利用F ...
- day60 Pyhton 框架Django 03
day61 内容回顾 1.安装 1. 命令行: pip install django==1.11.18 pip install django==1.11.18 -i 源 2. pycharm sett ...
- 100 天从 Python 新手到大师
Python应用领域和就业形势分析 简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支 ...
随机推荐
- Python数据模型
引言 像大多数人一样,我在对一直传统的面向过程语言C一知半解之后,走进了面向对象的世界,尽管对OOP一无所知,还好Python还保留有函数式编程,这使得我才不那么抵触,直到现在,习惯了面向对象之后,也 ...
- js-权威指南学习笔记19.2
1.jQuery动画是异步的,会立刻返回,但动画会在后台执行,可传入函数作为动画完成的回调函数. 2.jQuery动画默认是队列化的. 3.stop()方法接受两个可选的布尔值参数,如果第一个参数是t ...
- mysql数据库操作指令
数据库相关 查询所有数据库 show databases; 创建数据库 create database 数据库名: 创建数据库指定字符集 create database 数据库名 character ...
- OSGI企业应用开发(十三)OSGI Web应用开发(二)
上篇文章介绍了OSGI Web应用的两种开发模式,并把Jetty应用服务器以Bundle的形式整合到Equinox容器中,已这种模式开发Web应用,所有的应用程序资源,例如Servlet.JSP.HT ...
- [基础架构]PeopleSoft Web Server 重要文件说明
我们都知道PeopleSoft是由几个不同的服务组成的,他们在PeopleSoft体系结构中扮演着自己的角色.这些服务具有不同的文件结构并包含重要的可执行文件和配置文件. 以下是Peoplesoft体 ...
- android:首页点击返回键,两秒内再次点击退出系统
//记录用户首次点击返回键的时间 private long firstTime = 0; /** * 通过监听keyUp 实现双击返回键退出程序 * @param keyCode * @param e ...
- AsyncTask 处理耗时操作&&显示进度条
在Android中实现异步任务机制有两种,Handler和AsyncTask.优缺点自己百度,推荐使用AsyncTask. private ProgressDialog dialog; //新建一个对 ...
- innodb索引统计信息
以下分析基于mysql5.6.10 统计信息相关字典表 information_schema.statistics mysql.innodb_table_stats mysql.innodb_inde ...
- Azure 元数据服务:适用于 Windows VM 的计划事件(预览)
计划事件是 Azure 元数据服务中的其中一个子服务. 它负责显示有关即将发生的事件(例如,重新启动)的信息,使应用程序可以为其做准备并限制中断. 它可用于所有 Azure 虚拟机类型(包括 PaaS ...
- Linux parted命令详解
parted常见命令参数 Usage: parted [OPTION]... [DEVICE [COMMAND [PARAMETERS]...]...] Apply COMMANDs with PAR ...