Bootstrap学习笔记

一. 什么是Bootstrap?

　　- Bootstrap是全球最受欢迎的前端组件库,用于开发响应式布局,移动设备优先的WEB项目.

　　　　- www.bootcdn.cn

　　- 一个网页设计的框架,包含一些已经设计好的css,js,html模板,使用者可以直接拿来用.

二. 下载Bootstrap

　　https://v3.bootcss.com/getting-started/#download

　　- 官方文档,很详细

　　　　https://v3.bootcss.com/css/#grid

　　-Bootstra起步https://v3.bootcss.com/getting-started/#template

三. 响应式页面

　　- 对移动端很友好

　　- 采用响应式技术的网页,会根据屏幕(浏览器窗口)大小自动进行调整适应.从而减轻的网页设计师的工作量.

　　- 需要把下面这段代码放到网页的<head></head>标签中

　　- 下面是一段典型的响应式代码

      <style type="text/css">
          @media screen and (min-width: 1000px) {
              body{
              background-color: red;
            }
          }
          @media screen and (min-width: 500px) and (max-width: 999px){
              body{
              background-color: yellow;
            }
          }

      </style>

四. Bootstrap的基本使用

　　- 需要把下面这段代码放到网页的<head></head>标签中,用以引用Bootstrap的CSS功能

　　- Bootstrap布局容器

　　　　- 注意class = 'container', 'container'这个是Bootstrap定义好的样式(一个布局容器),它是自适应窗口变化的.

　　　　- class = 'container-fluid' 是百分百宽度的容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局容器</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">
        <h1>你好,世界!</h1>
        <h2>你好!!</h2>
    </div>
</body>
</html>

五. Bootstrap的栅格系统

　　- 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中.

　　- 随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.

　　- 试着改变下边代码的窗口,观察每一行矩形框的数量变化.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">  // 这里的数字指的是每一列所占的数量,总量是12.
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-8">
                <div class="thumbnail" style="height: 336px"></div>
            </div>
        </div>
    </div>
</body>
</html>

　　- 列偏移

　　　　<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> // col-md-offset-4表示偏移4列

六. Bootstrap的全局的CSS样式

　　设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

　　https://v3.bootcss.com/css/#overview

七. Bootstrap的组件

　　- 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

　　　　https://v3.bootcss.com/components/

　　- 如果网页中有Bootstrap的组件(js效果),则需要把下面两段代码加入到<body></body>内,内部的最后面

posted @ 2020-12-12 14:28 蓝蓝的白云天！阅读(251) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

蓝蓝的白云天！

Bootstrap学习笔记

公告