bootstrap入门

1、引入bootstrap真的好好看

效果展示：
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入css，开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <!--  生产版本  -->
<!--    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
</head>
<body>
<!--引入样式之后好好看！！！-->
<input type="button" value="提交">
<input type="button" value="提交" class="btn-primary">
<input type="button" value="提交" class="btn-success">
<input type="button" value="提交" class="btn-danger btn-xs">
</body>
</html>

2、引入步骤

https://v3.bootcss.com/css

  • 下载bootsrap
  • 将bootsrap解压文件加到对应目录下(如plugins)

3、栅格

效果预览
image

<div class="col-xs-2" style="background-color: pink">aa</div>
<div class="col-xs-9" style="background-color: blueviolet">bb</div>
  • 栅格分类：
    • 响应式：
      image
    • 非响应式:固定比例，改变浏览器宽高，格子会随之改变
<div class="col-xs-2" style="background-color: pink">aa</div>
<div class="col-xs-9" style="background-color: blueviolet">bb</div>
  • 列偏移：
# 偏移两个格
<div class="col-sm-offset-2 col-lg-2" style="background-color: pink">ss</div>

4、container

样式一：
<div class ="container-fluid">
  <div class="col-sm-3">左边</div>
  <div class="col-sm-3">右边</div>
</div>
样式二：
<div class ="container">
  <div class="col-sm-3">左边</div>
  <div class="col-sm-3">右边</div>
</div>

5、图标

posted @ 2022-12-30 23:43  风归去  阅读(46)  评论(0)  编辑  收藏  举报