前端---bootstrap入门

最新推荐文章于 2024-04-04 16:32:05 发布

危笑qwq

最新推荐文章于 2024-04-04 16:32:05 发布

阅读量494

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qw160/article/details/109356423

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap推荐网址

https://bootstrap.css88.com、

下载bootstrap css等文件

在这里插入图片描述

建立文件目录

1
在这里插入图片描述
2将下载的css等解压后放进bootstrap文件夹

index.html模板

注意link css要在官网代码上加上 bootstrap/(自己的文件夹)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
 <link href="bootstrap/css/bootstrap.min.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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

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

修改bootstrap样式

比如或一个bootstrap的按钮样式，我想让其应用于一个div，
在这里插入图片描述
修改样式在bootstrap的样式名后加一个 a1
再自己写a1样式

栅格

container类可以让前端代码适应大小不同的屏幕
现在body中建一个带有class=container的大盒子

在这里插入图片描述
栅格是把带有div class=container的大盒子分成12列
一个页面可以有很多container盒子
栅格样例结构

效果

指定在两种屏幕下这个盒子占几列，比如说手机很窄，那就让一个盒子沾满12份

盒子偏移原理：加外边距自适应的（在中间加空盒也能实现）
在这里插入图片描述