V2AS问路
BootStrap的基本使用
阅读原文时间：2023年07月10日阅读：1

bootstrap
现成的css样式，直接调用类
作用是快速写出页面
又称UI框架
Bootstrap中文网
LESS是预处理器
CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

下载bootstrap3.3.7
bootstrap自带响应式布局==》手机 电脑呈现不同的样式
渲染分辨率:
物理分辨率:

meta:vp
==》让手机浏览器不缩放
content:内容 自适应宽度

媒体查询 @media
需要再自定义css 当符合一个条件，需要重新定义该条件的css。

栅格系统把父元素分成12份 col-xs-6占一半

类名重复会覆盖 可以重新定义
class = "" 里面没有语义，只是单纯的设置格式如颜色等。

表单
label 获取焦点
class = "form-control"
class = "form-group"

class = control-label 控制向右对齐

span (current) 给阅读器看的。人文关怀，

  • 包含 CSS、JS特效插件 的工具集，快速开发网页

  • 经典的UI框架： BootStrap、JQueryUI、MeiziUI(AmazeUI)……

2.1 版本

  • 用于生产环境 (CSS\JavaScript)

  • 源码(LESS) (LESS是CSS预处理器)

  • SASS （SASS也是CSS预处理）





    Bootstrap演示



    同志交友 全国最大的交友平台 

     <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="#">Brand</a>  
     </div>
     &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;  
 &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;  
   &lt;ul class="nav navbar-nav"&gt;  
     &lt;li class="active"&gt;&lt;a href="#"&gt;Link &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;  
     &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;  
     &lt;li class="dropdown"&gt;  
       &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;  
       &lt;ul class="dropdown-menu"&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;  
         &lt;li role="separator" class="divider"&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;  
         &lt;li role="separator" class="divider"&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;  
       &lt;/ul&gt;  
     &lt;/li&gt;  
   &lt;/ul&gt;  
   &lt;form class="navbar-form navbar-left"&gt;  
     &lt;div class="form-group"&gt;  
       &lt;input type="text" class="form-control" placeholder="Search"&gt;  
     &lt;/div&gt;  
     &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;  
   &lt;/form&gt;  
   &lt;ul class="nav navbar-nav navbar-right"&gt;  
     &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;  
     &lt;li class="dropdown"&gt;  
       &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;  
       &lt;ul class="dropdown-menu"&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;  
         &lt;li role="separator" class="divider"&gt;&lt;/li&gt;  
         &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;  
       &lt;/ul&gt;  
     &lt;/li&gt;  
   &lt;/ul&gt;  
 &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;  
       </div><!-- /.container-fluid -->  
 </nav>  
 <!--  -->  
 <div class="row">  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
 </div>



Bootstrap

3.1 手机屏幕的分辨率

  • 现在绝大部分 手机 视网膜屏幕， 有物理分辨率，和 渲染分辨率。 iphone8 750*1334 渲染分辨率： 375*667

  • 手机浏览器 为了让 没有做响应式处理的网页能够正常显示， 自动进行缩放。视口的大小通常会设置为 980px

3.2 媒体查询

@media (min-width:) {
  选择器 {
     
  }
  选择器 {
       
  }
}

媒体特效：
min-width
min-height
max-width
max-height
width
height
………






媒体查询



栅格系统

     <div class="row">  
         <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, nihil dolore eveniet eaque itaque asperiores natus nostrum velit nisi similique inventore nesciunt impedit voluptates officia, perferendis omnis alias, hic harum?</div>

         <div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, illo quia delectus tempore eius officiis facilis nihil veritatis culpa et blanditiis ducimus adipisci deserunt perferendis, magni officia quidem, fugit tempora!</div>  
     </div>

     <div class="row">  
         <div class="col-md-4">Lorem ipsum dolor sit amet.</div>  
         <div class="col-md-8">HELLO</div>  
     </div>

     <div class="row">  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
         <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">Lorem ipsum dolor sit amet.</div>  
     </div>

     <div class="row">  
         <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>  
         <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>  
         <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>  
         <div class="col-sm-6 col-md-3">Lorem ipsum dolor sit amet.</div>  
     </div>

     <div class="row">  
         <div class="col-md-6"></div>  
         <div class="col-md-6">  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
             <div class="col-md-2">Lorem ipsum dolor sit amet.</div>  
         </div>  
     </div>

     <div class="row">  
         <div class="col-md-4 col-md-offset-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis, commodi! Sit corporis aliquid tempora, hic illum. Eaque recusandae aspernatur deserunt necessitatibus minima eligendi, sapiente nihil, eos deleniti modi ea?</div>  
     </div>

     <div class="row">  
         <div class="col-md-6">  
             <pre>Lorem ipsum dolor sit amet,  
             consectetur adipisicing elit. Numquam quasi modi totam deleniti hic debitis quisquam saepe, nulla fugit,  
              porro rem obcaecati fugiat magnam,  
             repellendus! Accusantium veritatis dolore qui aperiam.</pre>  
         </div>  
     </div>

 </div>

 <!--导入jquery-->  
 <script src="dist/js/jquery-3.3.1.js"></script>  
 <script src="dist/js/bootstrap.js"></script>


Bootstrap栅格系统

行和列

行 .row
列 col-xs-* col-sm-* col-md-* col-lg-*
把父元素分成12份，指定几份

4.2 表格

.table
.table-striped
.table-bordered
.table-hover
.table-condensed
.success .info .danger .warning .active






Bootstrap演示 


 <div class="container-fluid">  
     <div class="page-header">  
         <h1>按钮</h1>  
     </div>

     <div class="row">  
         <div class="col-md-12">  
             <button class="btn btn-default">按钮</button>  
             <button class="btn btn-info">按钮</button>  
             <button class="btn btn-success">按钮</button>  
             <button class="btn btn-warning">按钮</button>  
             <button class="btn btn-danger">按钮</button>  
             <button class="btn btn-primary">按钮</button>  
         </div>

         <div class="col-md-4">

             <button class="btn btn-primary btn-lg">按钮</button>  
             <button class="btn btn-primary">按钮</button>  
             <button class="btn btn-primary btn-sm">按钮</button>

             <button class="btn btn-primary btn-block">按钮</button>  
         </div>  
     </div>

     <div class="row">  
         <img src="data:images/product01.jpg" alt="">  
         <img src="data:images/product01.jpg" alt="" class="img-rounded">  
         <img src="data:images/product01.jpg" alt="" class="img-circle">  
         <img src="data:images/product01.jpg" alt="" class="img-thumbnail">  
     </div>

 </div>


按钮



Bootstrap演示 

 <div class="container-fluid">  
     <div class="page-header">  
         <h1 class="text-center">表单</h1>  
     </div>

     <div class="row">  
         <div class="col-md-12">  
             <p class="text-danger">  
                 <i class="glyphicon glyphicon-home"></i>  
             </p>

             <p class="" style="color:red;font-size:100px">  
                 <i class="glyphicon glyphicon-home"></i>  
             </p>

             <button class="btn btn-default">  
                 <i class="glyphicon glyphicon-ok"></i>  
             </button>

             <a href="#" class="btn btn-primary">  
                 <i class="glyphicon glyphicon-lock"></i>  
             </a>  
         </div>  
     </div>  
 </div>


Bootstrap组件



Bootstrap演示