• 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：固定流体的混合样式

     

  • 相关阅读:
    LTE& NR ARQ
    笔试强训(三十四)
    SpringBoot - SWAGGER3公共模块的抽象集成与使用(三)
    喜报 | 祝贺璞华科技通过CMMI Lv5 等级复审！
    为博客园开发了一套脚手架及模板——实时预览页面定制效果
    Vue使用脚手架出现问题 2
    java实现给图片添加水印(文字水印或图片水印)
    RocketMQ源码阅读（九）DefaultMQProducer消息发送
    Q&A特辑 | 这场直播解决了我对于电商风控的大部分疑问
    微信小程序云开发学习笔记No.01
  • 原文地址：https://blog.csdn.net/dengfengling999/article/details/127938446