# Bootstrap

WJLSH123

于 2021-08-10 08:53:50 发布

阅读量115

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/WJLSH123/article/details/119560586

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap

响应式布局

@meda 媒体类型 and 媒体特性{

}

@meda all and (min-width : 1024px){
	最小宽度为1024时显示的样式
}

@meda all and (min-width : 640px) and (max-width:1023px){
	宽度为640~1023时显示的样式
}

样式

模板引入

input：BS是什么

output：响应式框架
input：BS作用

output：快速开发模块的界面
input：BS的构成

output：三大件
input：BS如何搭建

output：BS的css文件、BS的js文件、JQ的js文件

<style>
	<link rel:'' href:'bootstrap.css'>
</style>
······
<body>
    <script src='jquery-    .js'></script>
    <script src='bootstrap.js'></script>
</body>

移动设备优先

Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport(视口) 元数据标签。

<meta name='viewport' content='width=device-width,init-scale=1'>
/* width 定义输出设备中的页面可见区域宽度。 */
/* device-width 定义输出设备的屏幕可见宽度。*/

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

<meta name='viewport' content='width=device-width, initial-scale=1,maxmum-scale=1,user-scalable=no'>
/*user-scalable=no 禁止缩放*/

BootStrap的使用

模板

<!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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

布局容器

两侧有空白
<!--.container 类用于固定宽度并支持响应式布局的容器。-->
<div class="container">
  ...
</div>


百分百宽度
<!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
<div class="container-fluid">
  ...
</div>

栅格网格系统

栅格参数

将容器平分成12个（24/36）
<div class='contation'>
    <div class='row'>
        <div class='col-XX-4'>
        </div>
	</div>
</div>
XX：
   xs：超小
   sm：小
   md：中
   lg：大

列组合

<div class='row'>
    <div class='col-XX-4'></div>	<div class='col-XX-4'></div>
    <div class='col-XX-4'></div>
</div>
列总数不可以大于12，如果大于，则自动换行

列偏移

<div class='row'>
    <div class='col-XX-offset-4'>	</div>
</div>
偏移数与列总数之和不可以大于12，如果大于，则自动换行

列排序

<div class='row'>
    <div class='col-XX-push-4'>向后排序</div>
    <div class='col-XX-pu11-4'>向前排序</div>
</div>
bs是通过浮动实现的排序（相同位置，后浮动会盖住先浮动）

列嵌套

<div class='row'>
    <div class='col-XX-6'>
        <!-- 每一列都可以再分为12列 -->
        <div class='row'>
            <div class='col-XX-6'></div>
    	</div>
    </div>
</div>

常用样式

标题

  	HTML中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了.h1 ~.h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
  	在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
       
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

段落

通过.lead来突出强调内容（其作用是增大文本字号，加粗文本，而且对行高和外边框也做了相应的处理）

强调

一套类名，规定了一套颜色
.text-muted:提示，浅灰色（#999）
.text-primary:主要，蓝色（#428bca）
.text-success:成功，浅绿色（#3c763d）
.text-info:通知消息，浅蓝色（#31708f）
.text-warning:警告，黄色（#8a6d3b）
.text-danger:危险，褐色（#a94442）

WJLSH123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# Bootstrap

Bootstrap响应式布局@meda 媒体类型 and 媒体特性{}@meda all and (min-width : 1024px){ 最小宽度为1024时显示的样式}@meda all and (min-width : 640px) and (max-width:1023px){ 宽度为640~1023时显示的样式}样式模板引入input：BS是什么output：响应式框架input：BS作用output：快速开发模块的界面input：BS的构成ou
复制链接

扫一扫

专栏目录