Bootstrap

Bootstrap中文文档

一、简介

  • Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
  • Bootstrap框架是基于jQuery的，在导入bootstrap框架的js时应先导入jQuery
  • 通过制定的页面(html)架构，采用特定的css类名，快速获取页面样式，结合指定的全局属性，达到预期的js效果
  • 通过指定类名也可以完成字体图标

二、安装与使用

1、本地链接

官网下载

<!-- 链接本地的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

<!-- 链接本地的 Bootstrap 核心 JavaScript 文件 -->

<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

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>

3、bootstrap的简单使用

<head>

    <meta charset="UTF-8">

    <title>bs的简单使用</title>

    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <style type="text/css">

    .z-btn {

        width: 300px;

    }

    .row {

        width: 100vw;

    }

    </style>

</head>

<body>

    <!-- row类名在bootstrap中已经写好样式，在链接过css样式后可以直接使用改类名实现css样式 -->

    <div class="row">

        <div class="btn btn-warning col-md-6 col-md-offset-3 z-btn">按钮</div>

    </div>

    <div class="row">

        <div class="btn btn-warning z-btn center-block">按钮</div>

    </div>

	<span class="caret"></span>

    <div class="dropup">

        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            列表

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">

            <li><a href="#">oldboy</a></li>

        </ul>

    </div>

</body>

<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

</html>

三、布局容器

  • 固定宽度：.container -- 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示
  • 流式布局：.container-fluid -- 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变
<head>

   </head><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>

    <!-- 固定宽度容器: 固定值 -->

    <div class="container">

        <h1 class="bg-warning">固定宽度容器</h1>

    </div>

    <!-- 流式布局容器: 百分比 -->

    <div class="container-fluid">

        <h1 class="bg-warning">流式布局容器</h1>

    </div>

</body>

<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

四、响应式布局

  • 超小屏幕：小于 768px , -- xs
  • 小屏幕：大于等于 768px , -- sm
  • 中等屏幕：大于等于 992px , -- md
  • 大屏幕：大于等于 1200px , -- lg

五、栅格系统

1、概念

将父级可用宽度(content)均分为12等份

2、列比

  • 超小屏幕：.col-xs-* -- 超小屏幕（屏幕宽度 < 768px）时，占据父级可用宽度中 * 份
  • 小屏幕：.col-sm-* -- 小屏幕（屏幕宽度 >= 768px）时，占据父级可用宽度中的 * 份
  • 中等屏幕：.col-md-* -- 中等屏幕（屏幕宽度 >= 992px）时，占据父级可用宽度中的 * 份
  • 大屏幕：.col-lg-* -- 大屏幕（屏幕宽度 >= 1200px）时，占据父级可用宽度中的 * 份
ps：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕

3、行

<!-- 第一行，row在bootstrap中已经处理过清浮动 -->

<div class="row"></div>

...

<!-- 第n行 -->

<div class="row"></div>


<div class="row">

    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的3份 -->

    <div class="col-md-3">

        <div class="md-3-box"></div>

    </div>

    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的6份 -->

    <div class="col-md-6 center">

        <div class="md-6-box"></div>

    </div>

    <!-- 当屏幕宽度为中等屏幕时，该div占据row中的3份;当屏幕宽度为小屏幕时，该div占据row中的2份 -->

    <div class="col-md-3 col-sm-2">

        <div class="md-3-box"></div>

    </div>

</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>

八、组件

组件课参考：https://v3.bootcss.com/components/

前端（十九）—— Bootstrap框架的更多相关文章

  1. 实战web前端之：Bootstrap框架windows下安装与使用

    Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...

  2. 前端基础 之 Bootstrap框架

    浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...

  3. 十九 Django框架，发送邮件

    全局配置settings.py EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' #发送邮件引擎 EMAIL_USE_TLS ...

  4. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  5. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  6. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap <基础十九>分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  8. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  9. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

随机推荐

  1. The document cannot be opened. It has been renamed, deleted or moved.

    In the Individual components section of the Visual Studio Installer, make sure that Razor Language S ...

  2. extract specified contents from two files.

    src_dir=$(pwd)/All_h dst_dir=$(pwd)/All diff_dir=$(pwd)/diff if [ ! -d $diff_dir ] then mkdir $diff_ ...

  3. 接口自动化测试框架-AIM2.0

    跳转到3.0版本https://www.cnblogs.com/df888/p/12031649.html AIM是我用python搭建的第一款接口自动化测试框架,随着技术的提升,框架也在升级,故有了 ...

  4. 02、python的基础-->占位符、while...else...、逻辑运算符

    1.%s.%d格式化输出程序(%占位符,s字符串,d数字) name = input('请输入姓名:') age = input('请输入年龄:') job = input('请输入工作:') hob ...

  5. Cocos2d-x之引擎框架简介

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.cocos2d-x的设计思想 cocos2d-x分为导演,场景,图层,精灵,节点: (1).导演(Director):控制整个游戏的场 ...

  6. 无法启动此程序 ，因为计算机中丢失MSVCP120.dll

    1.文件丢失问题 无法启动此程序 ,因为计算机中丢失MSVCP120.dll 具体如下图所示: 等dll文件丢失,可以去下载 DirectX修复工具去修复即可 http://www.pc6.com/s ...

  7. GetWindowsDirectoryA and GetSystemDirectory

    #include <iostream> #include <Windows.h> using std::cout; using std::endl; // 获取Windows文 ...

  8. mac MAMP安装redis扩展

    一般情况下目录大概是一样的,只是php的版本不同,所以选择好自己对应的php版本目录即可 git clone https://github.com/nicolasff/phpredis.git cd ...

  9. 重新开始学习C++

    从2002年,大二的那个夏天开始,就接触了C++这门语言,大学那会就是在老师不停教育下,背诵C++的各种特征,完全不知道C++干嘛用的,当然自然也是不知道汇编语言,C语言是干嘛用的,老师让学就学吧.那 ...

  10. QT之QCustomPlot(二)

    怎么设置X,Y轴位置 Manages a single axis inside a QCustomPlot. Usually doesn't need to be instantiated exter ...