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的更多相关文章

  1. day60——单表操作补充(批量插入、查询、表结构)

    day60 批量插入(bulk_create) # bulk_create obj_list = [] for i in range(20): obj = models.Book( title=f'金 ...

  2. day60 django入门

    目录 一.静态文件配置 1 引子 2 如何配置 1 在settins.py中的具体配置 2 静态文件的动态解析(html页面中) 二.request对象方法初识 三.pycharm链接数据库(mysq ...

  3. day60 pymysql

    预知扩展内容,详见地址如下(关于数据库备份和恢复) http://www.cnblogs.com/linhaifeng/articles/7525619.html 我们一般写程序都是在py文件里面,那 ...

  4. python 全栈开发,Day60(MySQL的前戏,数据库概述,MySQL安装和基本管理,初识MySQL语句)

    一.MySQL的前戏 在学习Mysql之前,我们先来想一下一开始做的登录注册案例,当时我们把用户的信息保存到一个文件中: #用户名 |密码 root|123321 alex|123123 上面文件内容 ...

  5. 《从零开始学Swift》学习笔记(Day60)——Core Foundation框架

    原创文章,欢迎转载.转载请注明:关东升的博客 Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.虽然在Swift中调用这种C语言风 ...

  6. 《从零開始学Swift》学习笔记(Day60)——Core Foundation框架

    创文章,欢迎转载.转载请注明:关东升的博客   Core Foundation框架是苹果公司提供一套概念来源于Foundation框架,编程接口面向C语言风格的API.尽管在Swift中调用这样的C语 ...

  7. Pyhton学习——Day60

    Form组件 - form表单(验证:保留上次内容) - - Ajax(验证:无需上次内容) - 返回HttpResponse - 前端:跳转或错误信息 1. Form组件扩展: 1.简单扩展 利用F ...

  8. day60 Pyhton 框架Django 03

    day61 内容回顾 1.安装 1. 命令行: pip install django==1.11.18 pip install django==1.11.18 -i 源 2. pycharm sett ...

  9. 100 天从 Python 新手到大师

    Python应用领域和就业形势分析 简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支 ...

随机推荐

  1. Python数据模型

    引言 像大多数人一样,我在对一直传统的面向过程语言C一知半解之后,走进了面向对象的世界,尽管对OOP一无所知,还好Python还保留有函数式编程,这使得我才不那么抵触,直到现在,习惯了面向对象之后,也 ...

  2. js-权威指南学习笔记19.2

    1.jQuery动画是异步的,会立刻返回,但动画会在后台执行,可传入函数作为动画完成的回调函数. 2.jQuery动画默认是队列化的. 3.stop()方法接受两个可选的布尔值参数,如果第一个参数是t ...

  3. mysql数据库操作指令

    数据库相关 查询所有数据库 show databases; 创建数据库 create database 数据库名: 创建数据库指定字符集 create database 数据库名 character ...

  4. OSGI企业应用开发(十三)OSGI Web应用开发(二)

    上篇文章介绍了OSGI Web应用的两种开发模式,并把Jetty应用服务器以Bundle的形式整合到Equinox容器中,已这种模式开发Web应用,所有的应用程序资源,例如Servlet.JSP.HT ...

  5. [基础架构]PeopleSoft Web Server 重要文件说明

    我们都知道PeopleSoft是由几个不同的服务组成的,他们在PeopleSoft体系结构中扮演着自己的角色.这些服务具有不同的文件结构并包含重要的可执行文件和配置文件. 以下是Peoplesoft体 ...

  6. android:首页点击返回键,两秒内再次点击退出系统

    //记录用户首次点击返回键的时间 private long firstTime = 0; /** * 通过监听keyUp 实现双击返回键退出程序 * @param keyCode * @param e ...

  7. AsyncTask 处理耗时操作&&显示进度条

    在Android中实现异步任务机制有两种,Handler和AsyncTask.优缺点自己百度,推荐使用AsyncTask. private ProgressDialog dialog; //新建一个对 ...

  8. innodb索引统计信息

    以下分析基于mysql5.6.10 统计信息相关字典表 information_schema.statistics mysql.innodb_table_stats mysql.innodb_inde ...

  9. Azure 元数据服务:适用于 Windows VM 的计划事件(预览)

    计划事件是 Azure 元数据服务中的其中一个子服务. 它负责显示有关即将发生的事件(例如,重新启动)的信息,使应用程序可以为其做准备并限制中断. 它可用于所有 Azure 虚拟机类型(包括 PaaS ...

  10. Linux parted命令详解

    parted常见命令参数 Usage: parted [OPTION]... [DEVICE [COMMAND [PARAMETERS]...]...] Apply COMMANDs with PAR ...