• Bootstrap（一）

    目录：

    （1）bootstrap容器

            1.简单框架使用

            2.流体容器 

            3.固定容器 

            4.栅格系统

    （1）bootstrap容器

    1.简单框架使用

    bootstrap-3.3.7、bootstrap-3.3.7-dist  是原码文件，带dist是编译完的，里面的css是经过压缩的

    不带dist是原码版本

    bootstrap的使用 

     创建demo文件夹：

     在这个demo引入bootstrap的样式：把-dist中的文件复制到demo文件夹下

     创建html：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		
    7. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    8. 	head>
    9. 	<body>
    10. 		
    11. 	body>
    12. 	
    13. 	<script src="js/jquery.min.js">script>
    14. 	<script src="js/bootstrap.min.js">script>
    15. html>

    可以看到引入了bootstrap的样式： 

    1.流体容器 

     创建：第二个html：02_流体容器.html

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    7. 		<style type="text/css">
    8. 			.container-fluid{
    9. 				background: pink;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		<div class="container-fluid">
    15. 			test
    16. 		</div>
    17. 	</body>
    18. 	<script src="js/jquery.min.js"></script>
    19. 	<script src="js/bootstrap.min.js"></script>
    20. </html>

    class是在bootstrap.min.css中注册过的：container-fluid

     两边是有padding的：没有宽度是100%，它是一个流体容器是一个流体布局

    没有宽度，是100%占整个屏幕，它是一个流体容器是一个流体布局，拉缩它会自动缩小

    2.固定容器 

     创建：03_固定容器.html

     去掉fluid，这个是一个固定容器，没有占满整个屏幕：当屏幕大小变化时里面的div宽度会随之进行相应的变化按照下面的数据变化：它有阈值

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    7. 		<style type="text/css">
    8. 			.container{
    9. 				background: pink;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		<div class="container">
    15. 			test
    16. 		</div>
    17. 	</body>
    18. 	<script src="js/jquery.min.js"></script>
    19. 	<script src="js/bootstrap.min.js"></script>
    20. </html>

     3.栅格系统

    创建04_栅格系统.html：

    第一个div一个固定容器container里面有一行，一行里面有2列一列占10分，一列占2分，宽度被分为12分，显示的时候当屏幕很大时才会有显示所占分数，当屏幕小时，直接都占一行：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    7. 		<style type="text/css">
    8. 			.container{
    9. 				background: pink;
    10. 			}
    11. 			div[class|=col]{
    12. 				border: 1px solid;
    13. 			}
    14. 		</style>
    15. 	</head>
    16. 	<body>
    17. 		<div class="container">
    18. 			<div class="row">
    19. 				<div class="col-lg-10">col-lg-10</div>
    20. 				<div class="col-lg-2">col-lg-2</div>
    21. 			</div>
    22. 			<div class="row">
    23. 				<div class="col-lg-6">col-lg-6</div>
    24. 				<div class="col-lg-6">col-lg-6</div>
    25. 			</div>
    26. 			<div class="row">
    27. 				<div class="col-lg-4">col-lg-4</div>
    28. 				<div class="col-lg-8">col-lg-8</div>
    29. 			</div>
    30. 		</div>
    31. 	</body>
    32. 	<script src="js/jquery.min.js"></script>
    33. 	<script src="js/bootstrap.min.js"></script>
    34. </html>

     

     

     （2）栅格源码分析（忽略）

    grid.less：栅格源码的入口：

    1. //固定容器
    2. .container {
    3.   .container-fixed();
    4.   @media (min-width: @screen-sm-min) {
    5.     width: @container-sm;
    6.   }
    7.   @media (min-width: @screen-md-min) {
    8.     width: @container-md;
    9.   }
    10.   @media (min-width: @screen-lg-min) {
    11.     width: @container-lg;
    12.   }
    13. }
    14. //流体容器
    15. .container-fluid {
    16.   .container-fixed();
    17. }
    18. // 行
    19. .row {
    20.   .make-row();
    21. }
    22. // 列
    23. .make-grid-columns();
    24. // 移动优先
    25. .make-grid(xs);
    26. @media (min-width: @screen-sm-min) {
    27.   .make-grid(sm);
    28. }
    29. @media (min-width: @screen-md-min) {
    30.   .make-grid(md);
    31. }
    32. @media (min-width: @screen-lg-min) {
    33.   .make-grid(lg);
    34. }

    variables.less：需要使用的变量

     grid.less：固定流体的混合样式

     

  • 相关阅读:
    有了数据中台，是否需要升级到数据飞轮？怎么做才能升级到数据飞轮？
    体验 win10 下 oceanbase 数据库
    Golang小数点保留
    为什么选择Python作为AI开发语言
    【智慧校园源码】中小学智慧班牌系统，实现校园信息化交流建设，提高班级管理效率
    2023 “华为杯” 中国研究生数学建模竞赛（B题）深度剖析|数学建模完整代码+建模过程全解全析
    长春理工大学计算机考研资料汇总
    阿里内部疯传“Java面试笔记”，熬了半个月刷完，斩获大厂offer
    java基于springboot+vue的汽车租赁系统-在线租车
    JPEG算法及例程
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/127938446