Bootstrap学习笔记

1、基本模板

<html lang="zh-CN">
  <head>
      <!--HTML的字符编码-->
    <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基本模板认识</title>

    <!-- Bootstrap -->
    <link href='lib/bootstrap/css/bootstrap.css' rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--条件注释：如果满足这个条件，就去执行里边的代码，不满足，就当做注释在那儿放着-->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="lib/jQuery/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

2、视口详解

3、布局容器

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

4、媒体查询的语法

/*媒体查询的语法：@media(条件判断){执行的代码块}*/
            @media (min-width: 768px) {
                .container{
                    width: 750px;
                }
            }
            @media (min-width:992px ) {
                .container{
                    width: 970px;
                }
                @media (min-width:1200px ) {
                .container{
                    width: 1170px;
                }
            }

 

posted @ 2020-11-17 19:37  ☞＠_＠  阅读(78)  评论(0)  编辑  收藏  举报