27-bootstrap框架1 容器栅格系统偏移隐藏按钮表单

bootstrap框架

ps：更详细的内容访问：https://v3.bootcss.com/css/#overview

简单、直观、强悍的前端开发框架，让web开发更迅速简单。是目前很受欢迎的前端框架之一。基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。

bootstrap中文网址：http://www.bootcss.com

下载后需要两个文件和一个文件夹：
bootstrap.min.js（放入js文件夹）
bootstrap.min.css（放入css文件夹）
font文件夹(放到css文件夹外面)

另外bootstrap是基于jquery的，所以要先引入jquery

<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

bootstrap有两种容器【其实就是已经写好的两个样式,所以容器的样式名是固定写法】：
1、container-fluid 流体容器【宽度100%】

2、container 响应式固定容器

container容器的几个默认区间设置：
1170
970
750
100%

当窗口变化时，容器宽度随之变化：
窗口大于等于1200：1170
窗口大于等于992:970
窗口大于等于768:750
窗口小于768:100%

<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        .container-fluid,.container{
            height:50px;
            border:1px solid #000;
            background-color:gold;
        }    
    </style>
</head>
<body>
    <div class="container-fluid">流体容器，宽度为100%，缩放窗口随之变化,做100%宽度是用这个容器</div>
    <br>
    <br>
    <br>
    <div class="container">响应式容器</div> 
</body>
</html>

bootstrap固定写法：

<!-- 一般固定写法，外层一个container，或者container-fluid，再一层来一个row，row里面放代码 -->
 <div class="container">
        <div class="row">
            这里放实现功能的代码
        </div>
</div>

为什么要放在row里面？为了保证它们的宽度是一样的

bootstrap栅格系统【bootstrap核心内容】

bootstrap将页面横向分为12等分【只管横向，纵向不管】，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

1、col-lg- 大于1200排成一行，小于1200分别占一行
2、col-md- 大于992排成一行，小于992分别占一行
3、col-sm- 大于768排成一行，小于768分别占一行
4、col-xs- 始终排列成一行

栅格系统演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        /* 属性选择器：含有'col-'的样式都匹配 */
         div[class*='col-']{
            height:50px;
            background-color:gold;
            border:1px solid #000;
         }
    </style>
</head>
<body>
    <div class="container">
        <h1>栅格系统</h1>
    </div> 

    <div class="container">
        <!-- 窗口小于1200时，四个div从一行变成各占一行 -->
        <div class="row">
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-4">col-lg-4</div>
            <div class="col-lg-2">col-lg-2</div>
            <div class="col-lg--3">col-lg-3</div>
        </div>
        <br>
        <br>
        <!-- 窗口小于992时，3个div从一行变成各占一行 -->
        <div class="row">
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
            <div class="col-md-4">col-md-4</div>
        </div>
        <br>
        <br>
        <!-- 窗口小于768时，4个div从一行变成各占一行 -->
        <div class="row">
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-3">col-sm-3</div>
        </div>
        <br>
        <br>
        <!-- col-xs- 始终排列成一行 -->
        <div class="row">
            <div class="col-xs-5">col-xs-5</div>
            <div class="col-xs-3">col-xs-3</div>
            <div class="col-xs-2">col-xs-2</div>
            <div class="col-xs-2">col-xs-2</div>
        </div>
    </div> 
</body>
</html>

栅格系统应用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        /* 属性选择器：含有'col-'的样式都匹配 */
        div[class*='col-']{
           /* background-color: gold;*/
/*            height:50px;*/
            /*border:1px solid #000;*/
        }
         .box{
            height:200px;

            /*.box最大宽度*/
            max-width:240px;
            
            background-color:cyan;
            border:1px solid #000;
            margin:20px auto;
         }
    </style>
</head>
<body>
    <div class="container">
        <h1>栅格系统响应式</h1>
    </div> 

    <div class="container">
        <!--col-lg-3(>1200)时排一行，后面col-md-3时还是一行，再后面col-sm-6就是排两行了，因为4个6就是24，刚好时两个12，一行只有12等分，24就是两行了  -->
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
            <div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
        </div>
       
    </div> 
</body>
</html>

bootstrap 类[栅格]偏移

1、col-lg-offset- 最大尺寸时偏移-
2、col-md-offset- 中等尺寸时偏移-
3、col-sm-offset- 更小尺寸时偏移-
4、col-xs-offset- 最小尺寸时偏移-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        /* 属性选择器：含有'col-'的样式都匹配 */
        div[class*='col-']{
            background-color: gold;
            height:50px;
            border:1px solid #000;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <h1>栅格偏移</h1>
    </div> 

    <div class="container">
       
        <div class="row">
            <!-- 
            两个列加起来时10，还有两等分，所以行右边空着2 
            让左边偏移1，刚好居中对齐

           <div class="col-lg-5"></div>
           <div class="col-lg-5"></div>
           
           -->
            
            <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1"></div>
            <div class="col-lg-5 col-md-5"></div>

        </div>
        <br>
        <br>
        <br>
        <div class="row">
            <!-- 2、左边的列再偏移1，整体居中对齐 -->
            <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1"></div>
            <!-- 1、一共时8，右边的列先偏移2 -->
            <div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2"></div>
        </div>
       
    </div> 
</body>
</html>

bootstrap 【栅格】隐藏\显示

1、hidden-xs 更小尺寸时隐藏
2、hidden-sm 小等尺寸时隐藏
3、hidden-md 中等尺寸时隐藏
4、hidden-lg 最大尺寸时隐藏

class	设备
.visible-xs	额外的小设备（小于 768px）可见
.visible-sm	小型设备（768 px 起）可见
.visible-md	中型设备（768 px 到 991 px）可见
.visible-lg	大型设备（992 px 及以上）可见
.hidden-xs	额外的小设备（小于 768px）隐藏
.hidden-sm	小型设备（768 px 起）隐藏
.hidden-md	中型设备（768 px 到 991 px）隐藏
.hidden-lg	大型设备（992 px 及以上）隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <!-- 因为bootstrap是写好了同时兼容pc和移动端的，移动端需要设置视口：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
        /* 属性选择器：含有'col-'的样式都匹配 */
        div[class*='col-']{
            background-color: gold;
            height:50px;
            border:1px solid #000;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <h1>栅格隐藏</h1>
    </div> 

    <div class="container">       
        <div class="row">
            <!-- 1、一共四个栅格，col-lg-3，刚好12，所以lg时是一行， 
                窗口缩小到md时，col-md-4，4*4=16，最后一个栅格就到了第二行了-->
            <!-- 3、col-sm-6：窗口sm时，两个列一行 -->
            <div class="col-lg-3 col-md-4 col-sm-6">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6">3</div>

            <!-- 2、这个栅格在窗口缩到md时会隐藏,然后窗口缩到比sm还小的xs时此栅格也会隐藏 -->
            <div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">4</div>
        </div>      
    </div> 
</body>
</html>

bootstrap按钮【组件】

1、btn 声明按钮，声明后，后面加上具体样式，比如class="btn btn-default"
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg 这几个绿色的是尺寸
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮[一般用在移动端,一整行的按钮]
13、active 颜色跟hover状态一样比较深
14、disable 按钮变暗，不能点，比如一个按钮在达到某条件之后才能点击，就可以先设置成disabled
15、btn-group 定义按钮组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 视口 -->
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   
    <title>Document</title>
    <!-- 另外bootstrap是基于jquery的，所以要先引入jquery -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <h2>按钮</h2>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <!-- btn是先声明一个按钮，不要省略，后面可以附加具体的样式 -->
            <input type="button" value="button" class="btn btn-lg btn-success">
            <br>
            <br>
            <a href="#" class="btn btn-primary">primary</a>
            <a href="#" class="btn btn-success">success</a>
            <a href="#" class="btn btn-info">info</a>
            <a href="#" class="btn btn-danger">danger</a>
            <a href="#" class="btn btn-warning">warning</a>
            <a href="#" class="btn btn-link">link</a>
             <a href="#" class="btn btn-danger active">active</a>
             <a href="#" class="btn btn-danger disabled">disabled</a>
            
        </div>

        <br>
        <br>

        <div class="row">
            <a href="#" class="btn btn-primary btn-lg">大按钮</a>
            <a href="#" class="btn btn-danger">一般按钮</a>
            <a href="#" class="btn btn-success btn-md">中等按钮</a>
            <a href="#" class="btn btn-info btn-xs">小按钮</a>            
        </div>
        <br>
        <br> 
        <div class="row">
            <a href="#" class="btn btn-primary btn-block">宽度是100%按钮</a>          
        </div>

        <br>
        <br> 
        <!-- 按钮组，三个按钮并在一起 -->
        <div class="row">
            <div class="btn-group">
                <a href="#" class="btn btn-primary">步骤一</a>
                <a href="#" class="btn btn-default">步骤二</a>
                <a href="#" class="btn btn-default">步骤三</a>
            </div>                
        </div>

        <br>
        <br> 
        <!-- 三个按钮占满一行，注意：这三个按钮是a标签做的，加上btn-group-justified没有问题，但是如果按钮是input，加上这个样式就会出现bug -->
        <div class="row">
            <div class="btn-group btn-group-justified">
                <a href="#" class="btn btn-primary">步骤一</a>
                <a href="#" class="btn btn-default">步骤二</a>
                <a href="#" class="btn btn-default">步骤三</a>
            </div>                
        </div>

        <br>
        <br> 
        <!-- 1、三个按钮占满一行，注意：这三个按钮如果是a标签做的，加上btn-group-justified没有问题，但是如果按钮是input，加上这个样式就会出现bug -->
        <div class="row">
            <div class="btn-group btn-group-justified">
                <input type="button" value="步骤一" class="btn btn-primary">
                <input type="button" value="步骤二" class="btn btn-primary">
                <input type="button" value="步骤三" class="btn btn-primary">
            </div>                
        </div>

        <br>
        <br>
        <!-- 修复上面说的bug,将每一个input用使用了btn-group样式的div包起来 -->
        <div class="row">
            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <input type="button" value="步骤一" class="btn btn-primary">
                </div>
                <div class="btn-group">
                    <input type="button" value="步骤二" class="btn btn-primary">
                </div>
                <div class="btn-group">
                    <input type="button" value="步骤三" class="btn btn-default">
                </div>    
            </div>                
        </div>

    </div>
</body>
</html>

bootstrap表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <h2>表单</h2>
        </div>
    </div>

    <div class="container">
        <div class="row">
            
            <form>
                <!-- 基本实例
                单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列 -->
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>

              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>

              <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
              </div>

              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <br>
            <br>
            <br>

            <!-- 
            内联表单

            为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

            可能需要手动设置宽度
            在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

            一定要添加 label 标签
            如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
            -->

            <!-- form-inline 内联表单：
                只要在<form>中添加一个样式：form-inline，就变成了内联表单，不在乎每个控件占一行了 -->
            <form class="form-inline">
              <div class="form-group">
                <label for="exampleInputName2">Name</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail2">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
              </div>
              <button type="submit" class="btn btn-default">Send invitation</button>
            </form>
            <br>
            <br>
            <br>
            <!-- form-horizontal 水平排列表单域
            通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row 了。 -->
            <form class="form-horizontal">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Remember me
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">Sign in</button>
                </div>
              </div>
            </form>
            <br>
            <br>
            <br>
            <!-- 表单控件组 -->
            <form>
                <div class="input-group">

                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control">

                </div>
            

            <!-- 表单控件组示例：搜索 
                但是这个搜索是一个span标签，不能点击-->
            <br>
            <br>          
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-addon">搜索</span>
                </div>

            <!-- 上面的span搜索不能点击，现在修正这个问题 -->
            <br>
            <br>
            
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <!-- 1、可以用input -->
                        <!-- <input type="button" value="搜索" class="btn btn-default"> -->
                        
                        <!-- 2、也可以用button -->
                        <button class="btn btn-primary">搜索</button>
                    </span>
                </div>

            <br>
            <br>   
                
                <!-- 同样是上面的搜索，现在不用“搜索”两个字，代替的是一个字体图片，在bootstrap网站的组件中有很多字体图片,图片的名字就是样式名，我们把‘搜索’删掉，换成一对<span>标签[当然你非要用div标签也可以]，并给<span>添加一个样式名为图片名字的样式
                另外，因为这个图片实际是文字，所以可以单独给它设置样式，比如font-size等 -->
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-primary"><span class="glyphicon glyphicon-search
                            "></span></button>
                    </span>
                </div>

            </form>


        </div>
    </div>

            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
</body>
</html>

posted @ 2019-04-10 20:48 greenfan 阅读(719) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

27-bootstrap框架1 容器 栅格系统 偏移 隐藏 按钮 表单

公告

27-bootstrap框架1 容器栅格系统偏移隐藏按钮表单