bootstrap学习笔记

迈不过友情╰ 2022-05-26 06:23 174阅读 0赞

1.  学习网站：https://v3.bootcss.com/
2.     
    
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            
3.  然后对Bootstrap进行引用  
    
    
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
        	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
4.  栅格系统中，列数是12，行数不固定
5.  实例：手机、平板、桌面  
    在上面案例的基础上，通过使用针对平板设备的 .col-sm-\* 类，我们来创建更加动态和强大的布局吧。
    
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
          <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
          <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
          <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
          
          <div class="clearfix visible-xs-block"></div>
          <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>
6.  栅格系统  
       1）响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。  
       2）工作原理  
          行必须放置在.container(固定宽度)或者.container-fluid(100%宽度) class内，获得适当的对齐(alignment)和内边距(padding)  
          内容放置在列中，唯有列可以是行的直接子元素  
          预定义的网格类，比如 .row 和 .col-lg-4，可用于快速创建网格布局  
          列通过内边距（padding）来创建列内容之间的间隙  
       3)媒体查询  
          /\* 超小设备（手机，小于 768px） \*/  
          /\* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） \*/  
      
      
          /\* 小型设备（平板电脑，大于等于768px） \*/  
          @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) \{ ... \}  
      
      
          /\* 中型设备（台式电脑，大于等于992px） \*/  
          @media (min-width: @screen-md-min) and (max-width: @screen-md-max) \{ ... \}  
      
      
          /\* 大型设备（大台式电脑，大于等于1200px） \*/  
          @media (min-width: @screen-lg-min) \{ ... \}  
       4）栅格参数  
                   超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)  
       栅格系统行为      总是水平排列                    开始是堆叠在一起的，当大于这些阈值时将变为水平排列C  
       .container 最大宽度None （自动）    750px                    970px                        1170px  
       类前缀           .col-xs-            .col-sm-                .col-md-                    .col-lg-  
       列（column）数    12  
       最大列（column）宽自动            ~62px                    ~81px                        ~97px  
       间隙宽度            30px （每列左右均有 15px）  
       可嵌套            是  
       偏移（Offsets）    是  
       列排序            是  
       5）//四种屏幕分类全部激活  
       <div class="container">  
            <div class="row">  
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>  
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>  
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>  
                ....  
            </div>  
       </div>  
         //可以设置列偏移，让中间保持空隙  
       <div class="container">  
            <div class="row">  
                <div class="col-md-8">1-8</div>  
                <div class="col-md-3 col-md-offset-1">10-12</div>  
            </div>  
       </div>  
         //可以嵌套，嵌满也是 12 列  
       <div class="container">  
            <div class="row">  
                <div class="col-md-9">  
                    <div class="col-md-8">1-8</div>  
                    <div class="col-md-4">9-12</div>  
                </div>  
                <div class="col-md-3"> 10-12 </div>  
            </div>  
       </div>  
         //可以把两个列交换位置，push 向右移动（推），pull 向左移动（拉）  
       <div class="container">  
            <div class="row">  
                <div class="col-md-8 col-md-push-4">8</div>  
                <div class="col-md-4 col-md-pull-8">4</div>  
            </div>  
       </div>  
    
7.  在css代码中写下如下代码，可以实现为所有类中包含col的div设置样式：  
    
    
        div[class^=col] {
                    border: 1px solid #ddd;
                    background: #269abc;
                    padding: 10px 20px;
                }
    
      
    
8.  offset 补偿（课本上或相关教程上一般都把这个叫做“偏移”），其实就是在左侧补列（1~11列）  
    push 推  
    pull 拉  
    偏移、推、拉，都有一个参照物，即相对的位置，那就是左侧， 相对于左侧偏移、推、拉   
    写法比如：  
    col-md-offset-3（在左侧补充3列）  
    col-md-push-6（从左侧往右侧推6列）  
    col-md-pull-4（往左侧拉4列）  
    
9.  效果图如下：  
    
    
    ![20180427154852662][]  
    
    
      
    
    
        <!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">
            <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
        	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
        	<title>bootstrap练习</title>
        	<style type="text/css">
        		div[class^=col]{border: 1px solid #ddd;background: #269abc;padding: 10px 20px;}
        		.thumbnail{margin-right: auto;margin-left: auto;max-width: 310px;}
        		.caption{text-align: center;}
        	</style>
        </head>
        <body>
        	<div class="container">
        		<div class="row">
        			<div class="col-lg-4">col-lg-4</div>
        			<div class="col-lg-4">col-lg-4</div>
        			<div class="col-lg-4">col-lg-4</div>
        			<div class="col-md-4 col-sm-6 col-xs-12">col-md-4</div>
        			<div class="col-md-4 col-sm-6 col-xs-12">col-md-4</div>
        			<div class="col-md-4 col-sm-6 col-xs-12">col-md-4</div>
        			<div class="col-md-3">col-md-3</div>
        			<div class="col-md-3">col-md-3</div>
        			<div class="col-md-3">col-md-3</div>
        			<div class="col-md-3">col-md-3</div>
        			<div class="col-md-5 col-md-offset-3">col-md-5 col-md-offset-3</div>
        			<div class="col-md-9">col-md-9
        				<div class="row">
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        				</div>
        				<div class="row">
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        					<div class="col-md-3">col-md-3</div>
        				</div>
        			</div>
        			<div class="col-md-3">col-md-3</div>
        			<div class="col-md-5 col-md-push-6">col-md-5</div>
                    <div class="col-md-7 col-md-pull-4">col-md-7</div>
        		</div>
        	</div>
        	<div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./images/codeguide.png" alt=""/>
                        <div class="caption">
                            <h3>
                                <a href="">Bootstrap 编码规范<br>
                                    <small>by @mdo</small>
                                </a>
                            </h3>
                            <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./images/codeguide.png" alt=""/>
                        <div class="caption">
                            <h3>
                                <a href="">Bootstrap 编码规范<br>
                                    <small>by @mdo</small>
                                </a>
                            </h3>
                            <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./images/codeguide.png" alt=""/>
                        <div class="caption">
                            <h3>
                                <a href="">Bootstrap 编码规范<br>
                                    <small>by @mdo</small>
                                </a>
                            </h3>
                            <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="./images/codeguide.png" alt=""/>
                        <div class="caption">
                            <h3>
                                <a href="">Bootstrap 编码规范<br>
                                    <small>by @mdo</small>
                                </a>
                            </h3>
                            <p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        </html>
    
      
    
10.

[20180427154852662]: /images/20220526/624302f71ffb45d7bafb1a7ba1c1f381.png