一篇文章熟练使用BootStrap，用的时候翻一下百度都省了！

Posted 2021-09-16 挽周的Java Library

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一篇文章熟练使用BootStrap，用的时候翻一下百度都省了！相关的知识，希望对你有一定的参考价值。

注意：本文主要讲解BootStrap常用的一些功能点，使用的idea开发工具。希望小伙伴们下去多加练习。

文章目录

响应式开发
BootStrap

响应式开发

响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。

响应式开发概念

响应式开发是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。

响应式开发原理

使用媒体查询针对不同宽度进行布局和样式的设置，从而适配不同的设备

设备划分	尺寸区间
超小屏幕（手机）	<768px
小平设备（平板）	>= 768px~992px
中等屏幕（桌面显示器）	>=992px~1200px
宽屏设备（大桌面显示器）	>=1200px

响应式布局容器

响应式需要一个父级作为布局容器，来配合子集容器来实现效果
例如：1200时父级容器有三个子集div 分三列，当容器变小的时候这三列div变成三行来显示

根据页面宽度动态该变布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .container{
    width: 750px;
    margin: 0px auto;
  }
  .container ul{
    list-style: none;
  }
  .container ul li{
    text-align: center;
    float: left;
    width: 93.75px;
    height: 30px;
    background-color: green;
  }
  @media screen and (max-width: 768px){
    .container ul li{
      float: left;
      width: 33.3%;
    }
    .container{
      width: 100%;
    }
  }
  /*如果屏幕宽度小于992px,宽度设置为750*/
  @media screen and (min-width: 992px){
    .container{
      width: 750px;
    }
  }
  /*如果屏幕宽度小于1200px,宽度设置为1100px*/
  @media screen and (min-width: 1200px) {
    .container{
      width: 952px;
    }
  }
  /*如果屏幕宽度大于1200px,宽度设置为1100px*/
  @media screen and (min-width: 1200px) {
    .container{
      width: 1100px;
    }
  }
</style>
<body>
<div class="container">
  <ul>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
    <li>导航栏</li>
  </ul>
</div>
</body>
</html>

宽屏效果

小屏效果

BootStrap

官网：https://getbootstrap.com/
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
中文官网：https://www.bootcss.com/

BootStrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的。

为什么使用 Bootstrap

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

BootStrap 初步使用

进入官网点击入门把bootstrap核心复制到页面（核心文件放在竟在资源也可），

点击组件粘贴想要的样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初步使用</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"></head>
<body>
一个放大镜 <span class="glyphicon glyphicon-search"></span>
</body>
</html>

初步使用BootStrap初次使用效果显示

注意：下面还有很多组件可以复制，前提当前页面要有bootstrap核心文件

布局容器

固定宽度布局容器

<!-- 一个固定宽度的相应式布局的div-->
<div class="container"></div>

占据全部视口布局容器

<!-- 一个占据全部视口的响应式布局的div-->
<div class="container-fluid"></div>

两种响应式布局页面效果显示

粉色为：container，黄色为：container-fluid

格栅系统

1.格栅系统参数

不同屏幕分辨率可以设置不同的格栅宽度，从而实现不同分辨率下显示不同布局

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

格栅系统使用

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>格栅系统</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style>
    .container ul{
      list-style: none;
    }
    .container ul li{
      text-align: center;
      float: left;
      height: 30px;
      background-color:greenyellow;
    }
  </style>
</head>
<body>
<!--  一个固定宽度的相应式布局的div-->
<div class="container">
  <ul>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
    <li class="col-xs-12 col-sm-6 col-md-3 col-lg-1">导航栏</li>
  </ul>
</div>
</body>
</html>

格栅系统效果显示

不同的屏幕宽度显示不同的布局

2.格栅系统偏移

格栅偏移参数：

xxxxxxxxxx class="col-md-offset-x" //x 是数字和格栅一样最大12 相当于在两个格栅中间加了一个空的格栅

格栅偏移使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>格栅系统偏移</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <style>
    .container ul{
      list-style: none;
    }
    .container ul li{
      text-align: center;
      float: left;
      height: 30px;
      background-color:greenyellow;
    }
  </style>
</head>
<body>
<!--  一个固定宽度的相应式布局的div-->
<div class="container">
  <ul>
    <li class="col-md-4 col-lg-4">导航栏</li>
    <li class="col-md-4 col-lg-4  col-md-offset-4">导航栏</li>
  </ul>
</div>
</body>
</html>

格栅偏移校效果显示

页面排版

1.副标题（small）

副标题使用

  <h1>这是个标题    <small>这是个副标题</small></h1>
  <h2>这是个标题    <small>这是个副标题</small></h2>
  <h3>这是个标题    <small>这是个副标题</small></h3>
  <h4>这是个标题    <small>这是个副标题</small></h4>

  <h1>这是个标题用class    <span class="small">这是个副标题</span></h1>
  <h2>这是个标题用class    <span class="small">这是个副标题</span></h2>
  <h3>这是个标题用class    <span class="small">这是个副标题</span></h3>
  <h4>这是个标题用class    <span class="small">这是个副标题</span></h4>

副标题使用效果显示

2.标记（mark）

标记使用

<h1>复制即用<mark>为初学者而生！</mark></h1>

标记效果显示

删除/无用文本标记

<h1><del>此方法已被删除</del></h1>
<h1><s>此方法已被废弃</s></h1>

删除无用标记效果显示

字体加重倾斜标记

<!-- em倾斜 strong加粗 多个标记可以写在一起组合使用-->
<h1><em><strong>加重字体</strong></em></h1>

字体加重倾斜标记效果显示

字体加重倾斜标记（HTML）

<p><b>ALYTS</b><br> 复制即用为初学者而生!</p>
<p><i>ALYTS</i以上是关于一篇文章熟练使用BootStrap，用的时候翻一下百度都省了！的主要内容，如果未能解决你的问题，请参考以下文章 
 java中DelayQueue的一个使用陷阱分析
 熟练掌握正则表达
 （转）丢掉鼠标吧,使用最好用的Eclipse快捷键
 响应式foundation栅格布局的“尝鲜”与“填坑”
 翻煎饼问题
 Windows Server 2008 R2常规安全设置及基本安全策略