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>

八、组件

Bootstrap Web框架的更多相关文章

  1. python_way day17 html-day3 前端插件(fontawsome,easyui,bootstrap,jqueryui,bxslider,jquerylazyload),web框架

    python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...

  2. 冰冻三尺非一日之寒--web框架Django

    1.JS 正则    test   - 判断字符串是否符合规定的正则        rep = /\d+/;        rep.test("asdfoiklfasdf89asdfasdf ...

  3. jS正则和WEB框架Django的入门

    JS正则 -test 判断字符串是否符合规定的正则表达式 -exec 获取匹配的数据 test的例子: 从上述的例子我们可以看出,如果rep.test匹配到了就返回true,否则返回false exe ...

  4. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  5. 我的web框架

    我的web框架 ========================================================== 前端:css(bootstrap,自己的代码片段),js(jque ...

  6. Koa – 更加强大的下一代 Node.js Web 框架

    Koa 是 Express 的开发团队设计的下一代 Web 框架,其目的是为 Web 应用程序提供更小,更具表现力,更坚实的基础.Koa 没有核捆绑任何中间件,并提供了一​​套优雅的方法,使服务器端开 ...

  7. [Python笔记]第十六篇:web框架之Tornado

    Tornado是一个基于python的web框架,xxxxx 安装 python -m pip install tornado 第一个Tornado程序 安装完毕我们就可以新建一个app.py文件,放 ...

  8. Day17 表单验证、滚动菜单、WEB框架

    一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. python运维开发(十七)----jQuery续(示例)web框架django

    内容目录: jQuery示例 前端插件 web框架 Django框架 jQuery示例 dom事件绑定,dom绑定在form表单提交按钮地方都会绑定一个onclick事件,所有查看网站的人都能看到代码 ...

随机推荐

  1. NOIP2018联赛总结

    NOIP2018联赛总结 Day 0 打了几个模板,看了一下别人的博客,背了一下vimrc Day 1 到了考场,先把vimrc配好 打开题目一先把三道题瞄了一眼,\(T1\)似乎是NOIP原题,\( ...

  2. 「HNOI2016」序列 解题报告

    「HNOI2016」序列 有一些高妙的做法,懒得看 考虑莫队,考虑莫队咋移动区间 然后你在区间内部找一个最小值的位置,假设现在从右边加 最小值左边区间显然可以\(O(1)\),最小值右边的区间是断掉的 ...

  3. A/D和D/A的学习

    从我们学到的知识了解到,我们的单片机是一个典型的数字系统.数字系统只能对输入的数字信号进行处理,其输出信号也是数字信号.但是在工业检测系统和日常生活中的许多物理量都是模拟量,比如温度.长度.压力.速度 ...

  4. yii2记录

    yii2的gridview使用大全 --- 18个问答 Yii2中多表关联查询(hasOne.hasMany.join.joinwith) Yii2.0 RESTful API 之速率限制(包含res ...

  5. WIndows下将文件夹映射为磁盘

    subst 盘符 文件夹路径 [/d] 映射 将e:\work映射为z:盘,使用subst z: e:\work 取消映射 取消z盘映射,使用subst z: /d 参考资料:http://mp.we ...

  6. A1130. Infix Expression

    Given a syntax tree (binary), you are supposed to output the corresponding infix expression, with pa ...

  7. 基于Senparc.CO2NET 缓存策略扩展的缓存使用方法

    没啥说的,直接上代码 1.缓存  CacheFactory 实现: //---------------------------------------------------------------- ...

  8. 详解 清除浮动 的多种方式(clearfix)

    说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...

  9. Web 服务器被配置为不列出此目录的内容。

    vs2015运行类库程序,遇到问题如下图, 最可能的原因: 没有为请求的 URL 配置默认文档,并且没有在服务器上启用目录浏览. 解决方法: 确认网站或应用程序配置文件中的 configuration ...

  10. 【译】11. Java反射——动态代理

    原文地址:http://tutorials.jenkov.com/java-reflection/dynamic-proxies.html 博主最近比较忙,争取每周翻译四篇.等不急的请移步原文网页. ...