bootstrap小结

最新推荐文章于 2022-09-21 20:36:45 发布

是小木啊

最新推荐文章于 2022-09-21 20:36:45 发布

阅读量112

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45743513/article/details/117671794

版权

1.什么是BootStrap

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

2. 为什么要使用BootStrap

定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
响应式布局：同一套页面可以兼容不同分辨率的设备。能够自适应于电脑，平板手机。

3.BootStrap的使用

下载Bootstrap,去官网v3.bootcss.com/下载
创建html页面，引入必要的资源文件


<!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 HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
         <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	    <script src="js/jquery-3.2.1.min.js"></script>
	    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	    <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<h1>你好，世界！</h1>
	
	</body>
	</html>

4.响应式布局

同一套页面可以兼容不同分辨率的设备


定义容器。相当于之前的table

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

container:两边留白

container-fluid:每一种设备都是100%宽度

定义行。相当于之前的tr


<div class="row"></div>

定义元素。指定该元素在不同设备上的所占的格子的数目。

<div class="col-xs-1"></div>
格式：col-设备代号-格子数目
设备代号：
		xs：超小屏幕，手机（<768px）
		sm：小屏幕 平板 (≥768px)
		md：中等屏幕 桌面显示器 (≥992px)
		lg：大屏幕 大桌面显示器 (≥1200px)

注意：

 一行中如果格子数目超过12，则超出部分自动换行。

 栅格属性可以向上兼容。 小屏幕定义的属性适用于大屏幕。

 如果设备宽度小于栅格类元素属性设置的最小宽度，那么一个元素会占满一行。

案例

在这里插入代码片
<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
     
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div>

是小木啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap小结

1.什么是BootStrap一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。2. 为什么要使用BootStrap定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果响应式布局：同一套页面可以兼容不同分辨率的设备。能够自适应于电脑，平板手
复制链接

扫一扫