Bootstrep

Bootstrap:

　　是web的css框架，集合了html/css/jquery为一体，创建响应式的页面

　　注意：ie   6/7/8兼容性有问题

　　响应式：适配不同的上网设备

　　入门：

　　　　1.下载bootstrap

　　　　　　网站：http://www.bootcss.com/

　　　　　　下载：用于生产环境的Bootstrap

　　　　2.导入bootstrap.css

　　　　3.导入jquery.js

　　　　4.导入bootstrap.js

　　　　5.添加一个meta标签，支持移动设备　　

　　　　<meta name = "viewport" content = "width=device-width,initial-scale = 1">

　　　　6.将所有的内容放入到布局容器中

　　　　　　Bootstrap需要为页面内容和栅格系统包裹一个 .container容器。我们提供了两个作此用处的类

　　　　　　方式1：

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

　　　　　　方式2：

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

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!--
            描述：导入css
        -->
        <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
        <!--
            描述：导入jquery
        -->
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <!--
            描述：导入bootstrap
        -->
        <script type="text/javascript" src="js/bootstrap.js" ></script>
    </head>
    <body>
        <div class="container">
            <div style="border: 1px solid red;">123</div>
        </div>
        <div class="container-fluid">
            <div style="border: 1px solid red;">123</div>
        </div>
    </body>
</html>

　　注意：bootstrap将每一行分成12份

　　媒体查询：

　　　　屏幕分辨率>1200,每行显示6个       使用：col-lg-2

　　　　992<屏幕分辨率<1200,每行显示4个      使用col-md-3

　　　　768<屏幕分辨率<992,每行显示2个        使用col-sm-6

　　　　屏幕分辨率<768,每行显示1个        使用：col-xs-12

　　　　隐藏：

　　　　　　hidden -xs|sm|md|lg  在什么屏幕下隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!--
            描述：导入css
        -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--
            描述：导入jquery
        -->
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <!--
            描述：导入bootstrap
        -->
        <script type="text/javascript" src="js/bootstrap.js" ></script>
    </head>
    <body>
        <div class="container-fluid">
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">123</div>
        </div>
    </body>
</html>

　　bootstrap组成部分：

　　　　全局css样式

　　　　　　https://v3.bootcss.com/css/

　　　　组件

　　　　　　https://v3.bootcss.com/components/

　　　　js插件　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- 导入 css-->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--导入jquery.js-->
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
            
        <!--导入bootstrap.js-->
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
        <script>
            $(function(){
                $(".carousel").carousel({
                    interval:1000,
                })
            })
        </script>
    </head>
    <body>
        <div class="container">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- 需要几张图片就添加几个li，还需要在下面的div中提供几个class = item的div -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>
            
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="img/1.jpg" alt="">
                  <div class="carousel-caption">
                    1
                  </div>
                </div>
                <div class="item">
                  <img src="img/2.jpg" alt="">
                  <div class="carousel-caption">
                    2
                  </div>
                </div>
                <div class="item">
                  <img src="img/3.jpg" alt="">
                  <div class="carousel-caption">
                    3
                  </div>
                </div>
              </div>
            
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
    </body>
</html>
js插件---轮播图

　　响应式页面创建：

　　　　1.创建一个模板页面

　　　　2.创建一个导航条

　　　　3.创建一个轮播图

　　　　4.创建三个div

　　　　　　中等屏幕时   3个一行

　　　　　　小屏幕时       2个一行

　　　　　　最小屏幕时   1个一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!--
            描述：导入css
        -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <!--
            描述：导入jquery
        -->
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <!--
            描述：导入bootstrap
        -->
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
        <script>
            $(function(){
                $(".carousel").carousel({
                    interval:1000,
                })
            })
        </script>
    </head>
    <body>
        <div class="container">
            <!--
                作者：514446231@qq.com
                时间：2020-07-21
                描述：导航条
            -->
            <div class="row">
                <nav class="navbar navbar-default">
                  <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Yisen</a>
                    </div>
                
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Java<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">C++</a></li>
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">C#</a></li>
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">Python</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">安卓</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">IOS</a></li>
                          </ul>
                        </li>
                      </ul>
                      <form class="navbar-form navbar-left pull-right" role="search">
                        <div class="form-group">
                          <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                      </form>
                    </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
                </nav>
            </div>
            <!--
                作者：514446231@qq.com
                时间：2020-07-21
                描述：轮播图
            -->
            <div class="row">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <!-- 需要几张图片就添加几个li，还需要在下面的div中提供几个class = item的div -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  </ol>
                
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active">
                      <img src="img/1.jpg" alt="">
                      <div class="carousel-caption">
                        1
                      </div>
                    </div>
                    <div class="item">
                      <img src="img/2.jpg" alt="">
                      <div class="carousel-caption">
                        2
                      </div>
                    </div>
                    <div class="item">
                      <img src="img/3.jpg" alt="">
                      <div class="carousel-caption">
                        3
                      </div>
                    </div>
                  </div>
                
                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
            </div>
            <!--
                作者：514446231@qq.com
                时间：2020-07-21
                描述：div
            -->
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h2>Yisen</h2>
                    <p>Yiyi</p>
                    <a href="#" class="btn btn-danger pull-right">more</a>
                </div>
                
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h2>Yisen</h2>
                    <p>Yiyi</p>
                    <a href="#" class="btn btn-danger pull-right">more</a>
                </div>
                
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <h2>Yisen</h2>
                    <p>Yiyi</p>
                    <a href="#" class="btn btn-danger pull-right">more</a>
                </div>
                
            </div>
        </div>
    </body>
</html>
示例

　　响应式页面升级版：

　　　　需求：

　　　　　　当屏幕为小屏和超小屏时，隐藏热门商品中的左边那张图

　　　　步骤分析：

　　　　　　1.布局页面

　　　　　　2.创建8个div

　　　　　　3.第一个：logo

　　　　　　　　3个div    小屏幕时    2个一行   超小屏一个一行

　　　　　　4.第二个div：导航条

　　　　　　5.第三个div：轮播图

　　　　　　6.第四个div：最新商品

　　　　　　　　先分成左右两个div   

　　　　　　　　　　左边的div    放一张图

　　　　　　　　　　　　屏幕为小屏幕和超小屏时   隐藏

　　　　　　　　　　　　中等屏幕  占2份

　　　　　　　　　　右边的div 

　　　　　　　　　　　　中等屏幕   占10份

　　　　　　　　　　　　屏幕为小屏和超小屏时   占12份

　　　　　　　　　　　　　　middle

　　　　　　　　　　　　　　　　中等屏幕：  6份

　　　　　　　　　　　　　　　　小屏幕：12份

　　　　　　　　　　　　　　　　超小屏  隐藏

　　　　　　　　　　　　　　商品：

　　　　　　　　　　　　　　　　中等屏幕： 2份

　　　　　　　　　　　　　　　　小屏：    4份

　　　　　　　　　　　　　　　　超小屏：12份

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!--
            描述：导入css
        -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <!--
            描述：导入jquery
        -->
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <!--
            描述：导入bootstrap
        -->
        <script type="text/javascript" src="../js/bootstrap.js" ></script>
        <script>
            $(function(){
                $(".carousel").carousel({
                    interval:1000,
                })
            })
        </script>
    </head>
    <body>
        <div class="container">
            <!--logo
                小屏幕时    2个一行  
                超小屏一个一行
            -->
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12" ">
                    <img src="../img/logo2.png" />
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12" ">
                    <img src="../img/header.jpg" />
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12" ">
                    <ul class="list-inline pull-right">
                        <li style="padding-top:25px ;"><a href="#">登录</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">购物车</a></li>
                    </ul>
                </div>
            </div>
            <!--导航栏-->
            <div class="row">
                <nav class="navbar navbar-inverse">
                  <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="#">Yisen</a>
                    </div>
                
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Java <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Javascript</a></li>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Python</a></li>
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">安卓</a></li>
                            <li><a href="#">ios</a></li>
                            <li><a href="#">Html</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">UI</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">PHP</a></li>
                          </ul>
                        </li>
                      </ul>
                      <form class="navbar-form navbar-left pull-right">
                        <div class="form-group">
                          <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                      </form>
                    </div><!-- /.navbar-collapse -->
                  </div><!-- /.container-fluid -->
                </nav>
            </div>
            <!--轮播图-->
            <div class="row">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <!-- 需要几张图片就添加几个li，还需要在下面的div中提供几个class = item的div -->
                  <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                  </ol>
                
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active">
                      <img src="../img/1.jpg" alt="">
                      <div class="carousel-caption">
                        1
                      </div>
                    </div>
                    <div class="item">
                      <img src="../img/2.jpg" alt="">
                      <div class="carousel-caption">
                        2
                      </div>
                    </div>
                    <div class="item">
                      <img src="../img/3.jpg" alt="">
                      <div class="carousel-caption">
                        3
                      </div>
                    </div>
                  </div>
                
                  <!-- Controls -->
                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>
            </div>
            <!--最新商品-->
            <div class="row">
                <div class="row">
                    <span class="h2">最新商品</span>
                    <img src="../img/title2.jpg">
                </div>
                <!--
                    左边的div 放一张图片 
                    屏幕为小屏幕的时候和超小屏幕的时候 隐藏
                    中等屏幕 占2份-->
                <div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">
                    <img src="../img/big01.jpg" style="height: 100%;"/>
                </div>
                
                <!--
                    中等屏幕 占10份
                    屏幕为小屏幕的时候和超小屏幕的时候 占12份
                -->
                <div class="col-md-10 col-sm-12" style="height: 400px;">
                    <!--middle
                        中等屏幕 6份
                        小屏幕    12份
                        超小屏幕 隐藏：
                    -->
                    <div class="col-md-6 col-sm-12 hidden-xs" style="height: 200px;">
                        <img src="../img/middle01.jpg" style="height: 200px;"/>
                    </div>
                    
                    <!--
                        中等屏幕 2份
                        小屏幕      4份
                        超小屏幕 12份
                    -->
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg"  />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-12" style="height: 200px;">
                        <img src="../img/small08.jpg" />
                    </div>
                    
                    
                </div>
            </div>
            <!--foot-->
            <div class="row"></div>
        </div>
    </body>
</html>
升级版
posted @ 2020-07-22 00:58  Yisennnn丶  阅读(150)  评论(0)    收藏  举报