24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > PHP开发

BootStrap学习教程(一)

2017-10-28 14:39:34 东方博宜 阅读

1bootstrap

css框架,作用:定义了一些css的常见样式,实现了“响应式”页面编辑!

什么是响应式页面编辑?

在不同的屏幕上:PC(普通PC、超大屏幕PC)、pad、手机都可能有良好的浏览体验!

 

实现多屏适应:

A、响应式页面

B、移动端单独做

 

如何做到响应式页面编辑?

A、页面结构不宜过于复杂!

B、一行中,不同屏幕尺寸,显示的div的块数量变量

C、不同的屏幕尺寸,可以选择适当隐藏部分内容

 

官网:http://www.bootcss.com/

教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

 

2、入门案例

源码下载:http://v3.bootcss.com/getting-started/#download

 

例子:引用bootstrapbutton的样式

     <!-- 引入如下的文件使得bootstrap生效 -->

     <link type="text/css" href="dist/css/bootstrap.min.css" rel="stylesheet"/>

     <script type="text/javascript" src="dist/js/jquery-1.11.3.min.js"></script>

     <script type="text/javascript" src="dist/js/bootstrap.js"></script>

    

     <!-- 引用bootstrap定义好的样式 -->

     <input type="button" value="点击测试" class="btn btn-primary"/>

     <br />

     <input type="button" value="点击测试" class="btn btn-default"/>

     <br />

     <input type="button" value="点击测试" class="btn btn-success"/>

     <br />

     <input type="button" value="点击测试" class="btn btn-danger"/>

     <br />

     <input type="button" value="点击测试" class="btn btn-warning"/>

     <br />

     <input type="button" value="点击测试" class="btn btn-info"/>

 

3、表格

常见的表格样式:

描述

.table

为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped

<tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered

为所有表格的单元格添加边框

.table-hover

<tbody> 内的任一行启用鼠标悬停状态

.table-condensed

让表格更加紧凑

 

表格的tr或者td的进一步修饰:

描述

.active

将悬停的颜色应用在行或者单元格上

.success

表示成功的操作

.info

表示信息变化的操作

.warning

表示一个警告的操作

.danger

表示一个危险的操作

 

表格案例:

     <!-- 引入如下的文件使得bootstrap生效 -->

     <link type="text/css" href="dist/css/bootstrap.min.css" rel="stylesheet"/>

     <script type="text/javascript" src="dist/js/jquery-1.11.3.min.js"></script>

     <script type="text/javascript" src="dist/js/bootstrap.js"></script>

    

     <style type="text/css">

        table,table tr th{

           text-align:center;

        }

       

        table thead{

            background-color:#222;

            color:#FFF;

        }

     </style>

    

     <h1 class="text-center">学员成绩汇报</h1>

    

     <!-- 建议元素放到container里面 -->

     <div class="container">

               <!-- .table的样式默认占满父元素 -->

              <table class="table table-bordered table-striped table-hover table-condensed">

                 <thead>

                    <tr>

                       <th>姓名</th>

                       <th>语文</th>

                       <th>数学</th>

                       <th>英语</th>

                       <th>物理</th>

                    </tr>

                 </thead>

                

                 <tbody>

                    <tr class="success">

                             <td>赵小芳</td>

                             <td>99</td>

                             <td>100</td>

                             <td>98</td>

                             <td>90</td>

                    </tr>

                   

                    <tr>

                             <td>赵小芳</td>

                             <td>99</td>

                             <td>100</td>

                             <td>98</td>

                             <td>90</td>

                    </tr>

                   

                    <tr>

                             <td>赵小芳</td>

                             <td>99</td>

                             <td>100</td>

                             <td>98</td>

                             <td>90</td>

                    </tr>

                   

                    <tr>

                             <td>赵小芳</td>

                             <td>99</td>

                             <td>100</td>

                             <td>98</td>

                             <td>90</td>

                    </tr>

                   

                    <tr>

                             <td>赵小芳</td>

                             <td>99</td>

                             <td>100</td>

                             <td>98</td>

                             <td>90</td>

                    </tr>

                 </tbody>

              </table>

     </div>

 

4、图片

图片相关的样式:

描述

.img-rounded

为图片添加圆角 (IE8 不支持)

.img-circle

将图片变为圆形 (IE8 不支持)

.img-thumbnail

缩略图功能

.img-responsive

图片响应式 (将很好地扩展到父元素)

 

例子:自己实现可缩放的图片

     <style type="text/css">

        .myimg{

           width:100%;max-width:1024px;min-width:500px;

          border-radius:50%;

        }

     </style>

    

     <img src="img/1.jpg" class="myimg"/>

 

例子:采用bootstrap实现

    

     <img src="img/1.jpg" class="img-responsive img-circle"/>

 

5、辅助类

A、文本颜色



描述

.text-muted

"text-muted" 类的文本样式

.text-primary

"text-primary" 类的文本样式

.text-success

"text-success" 类的文本样式

.text-info

"text-info" 类的文本样式

.text-warning

"text-warning" 类的文本样式

.text-danger

"text-danger" 类的文本样式

 

B、背景颜色

描述

.bg-primary

表格单元格使用了 "bg-primary"

.bg-success

表格单元格使用了 "bg-success"

.bg-info

表格单元格使用了 "bg-info"

.bg-warning

表格单元格使用了 "bg-warning"

.bg-danger

表格单元格使用了 "bg-danger"

 

C、位置的控制

描述

.pull-left

元素浮动到左边

.pull-right

元素浮动到右边

.center-block

设置元素为 display:block 并居中显示

.clearfix

清除浮动

.show

强制元素显示

.hidden

强制元素隐藏

.close

显示关闭按钮

.caret

显示下拉式功能

例子:左右对齐

     <style type="text/css">

        .firstline{

           width:100%;height:50px;line-height:50px;background-color:#222;

           color:#FFF;

        }

       

        .box01,.box02{

           width:100px;

           height:20px;

        }

       

        .box01{

           float:left;

        }

       

        .box02{

           float:right;

        }

     </style>

    

     <div class="firstline">

              <div class="pull-left">

                 LOGO

              </div>

             

              <div class="pull-right">

                       登陆按钮

              </div>

     </div>

    

     <div class="box01 bg-success">

       BOX01

     </div>

    

     <div class="box02 bg-danger">

              BOX02

     </div>

 

6、网格

基本原理:将一行分为12个单元,然后通过占用几个单元来决定占用的宽度!

.col-xs-**:超小设备手机(<768px

.col-sm-**:小型设备(>=768px

.col-md-**:中型设备(>=992px

.col-lg-**:大型设备(>=1200

 

例子:选用哪种设备的写法对比

     <style type="text/css">

        .row{

           background-color:gray;

        }

       

        .row div{

           height:60px;

           border:1px solid #F00;

        }

     </style>

    

    

     <!-- 最外层的大的div -->

     <div class="container">

                   缩放页面对比一下:

              <!-- row:行 -->

              <div class="row">

                       <div class="col-lg-2">

                       </div>

                      

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

                       </div>

                      

                       <div class="col-lg-6">

                       </div>                 

              </div>

    

     <br />

              <!-- row:行 -->

              <div class="row">

                       <div class="col-xs-2">

                       </div>

                      

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

                       </div>

                      

                       <div class="col-xs-6">

                       </div>                 

              </div>

     </div>

 

注意:如果希望div的分布格局在各个宽度的浏览器中看上去都是一样的,应该采用最小的设备写法.col-xs-**

 

例子:在不同宽度的浏览器中,一行占有的div的宽度变化

    <style type="text/css">

        .row{

           background-color:gray;

        }

       

        .row div{

           height:60px;

           border:1px solid #F00;

        }

     </style>

    

    

     <!-- 最外层的大的div -->

     <div class="container">

                      不同宽度一行显示的DIV数量变化:

              <!-- row:行 -->

              <div class="row">

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>        

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>        

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

                       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                       </div>

                      

              </div>

    

     </div>

 

例子:列偏移(.col-**-offset-6)注意,.col-xs不支持

 

例子:在不同屏幕下的显示、隐藏

     <!-- 最外层的大的div -->

     <div class="container">

         列偏移、在部分屏幕中显示隐藏:

              <!-- row:行 -->

              <div class="row">

                       <div class="col-xs-3 col-xs-offset-3">

                         CELL1

                       </div>

                       <div class="col-xs-3 hidden-xs">

                         CELL2

                       </div>

                       <div class="col-xs-3 visible-lg">

                         CELL3

                       </div>

                      

              </div>

     </div>

 

 

例子:列排序

.col-**-push-*.col-**-pull-*

 

     <!-- 最外层的大的div -->

     <div class="container">

                     列排序:

              <!-- row:行 -->

              <div class="row">

                       <div class="col-xs-3 col-xs-push-6">

                         CELL1

                       </div>

                       <div class="col-xs-3">

                         CELL2

                       </div>

                       <div class="col-xs-3 col-xs-pull-6">

                         CELL3

                       </div>

                       <div class="col-xs-3">

                         CELL4

                       </div>

              </div>

     </div>

 

7、表单

使用要求:

向父 <form> 元素添加 role="form"

把标签和控件放在一个带有 class .form-group  <div> 中。这是获取最佳间距所必需的。

向所有的文本元素 <input><textarea> <select> 添加 class ="form-control"

 

例子:基本的表单

     <!-- 最外层的大的div -->

     <div class="container">

              <h1 class="text-center">欢迎登陆</h1>

              <form role="form">

                       <div class="form-group">

                           用户名:

                         <input type="text" class="form-control" placeholder="请输入用户名"/>

                       </div>

                      

                       <div class="form-group">

                           密码:

                         <input type="text" class="form-control" placeholder="请输入密码"/>

                       </div>

                      

                       <div class="form-group">

                                <div class="col-sm-3 col-xs-6 col-sm-offset-3">

                                   <input type="submit" value="提交" class="btn btn-success form-control"/>

                                </div>

                               

                                <div class="col-sm-3 col-xs-6">

                                          <input type="reset" value="重置" class="btn btn-danger form-control" />

                                </div>

                       </div>

              </form>

     </div>

 

例子:内联表单(水平在一行的表单)

请向 <form> 标签添加 class .form-inline

     <!-- 最外层的大的div -->

     <div class="container">

              <h1 class="text-center">欢迎登陆</h1>

              <form role="form" class="form-inline">

                       <div class="form-group">

                           用户名:

                         <input type="text" class="form-control" placeholder="请输入用户名"/>

                       </div>

                      

                       <div class="form-group">

                           密码:

                         <input type="text" class="form-control" placeholder="请输入密码"/>

                       </div>

                      

                       <div class="form-group">

                                   <input type="submit" value="提交" class="btn btn-success form-control"/>

                                   <input type="reset" value="重置" class="btn btn-danger form-control" />

                       </div>

              </form>

     </div>

 

例子:水平表单

向父 <form> 元素添加 class .form-horizontal

把标签和控件放在一个带有 class .form-group  <div> 中。

向标签添加 class .control-label

 

     <!-- 最外层的大的div -->

     <div class="container">

              <h1 class="text-center">欢迎登陆</h1>

              <form role="form" class="form-horizontal">

                       <div class="form-group">

                           <label class="control-label col-sm-2">用户名:</label>

                           <div class="col-sm-10">

                                        <input type="text" class="form-control" placeholder="请输入用户名"/>

                           </div>

                       </div>

                      

                       <div class="form-group">

                           <label class="control-label col-sm-2">密码:</label>

                           <div class="col-sm-10">

                                        <input type="text" class="form-control" placeholder="请输入密码"/>

                              </div>

                       </div>

                      

                       <div class="form-group">

                                   <div class="col-sm-3 col-sm-offset-3">

                                       <input type="submit" value="提交" class="btn btn-success form-control"/>

                                   </div>

                                   <div class="col-sm-3">

                                       <input type="reset" value="重置" class="btn btn-danger form-control" />

                                   </div>

                       </div>

              </form>

     </div>

 

1509172961.jpg

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn