【Web前端开发】之Bootstrap基础(一)

来源：互联网发布：网络歌手思念是一把刀编辑：程序博客网时间：2024/05/08 00:23

Bootstrap 简单介绍
下载Bootstrap
Bootstrap 浏览器标签
容器标签
Bootstrap 核心
栅格系统
按钮效果
其他的标签

Bootstrap 简单介绍

随着移动互联网发展，越来越多问题出现在浏览器的适配上，如手机端和PC端网页布局解析，以及与此相关的互联网老问题——浏览器的兼容性问题。随着Bootstrap框架的出现，一种非常好的解决solution。Bootstrap是由美国社交平台巨头推特(Twitter)公司开发的，它的主要目标是提供一种跨平台兼容性的响应式互联网前端框架。

下载Bootstrap

有很多不同的Bootstrap版本，目前最新版本的Bootstrap是4.0-beta版本，它的下载地址是
http://getbootstrap.com/, 点击下载按钮既可以下载了。下载完毕后，解压缩下载包，在主目录下文件夹中，存在3个目录css/ 和js/ /font 目录，这2个目录就是本文所需要的最重要的文件，即Bootstrap core 文件。将这2个文件拷贝你的工程的主目录中，然后下载Jquery文件（关于这一部分，本文省略）。

在html文件中添加如下代码，引入相关的JS和css代码，这样我们就可以使用bootstrap框架。

    // Bootstrap css库    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet">    // JQuery库    <script src="./jquery/jquery-3.2.1.js" type="text/javascript"></script>    // Bootstrap js库    <script src="./bootstrap/js/bootstrap.js" type="text/javascript"></script>

Bootstrap 浏览器标签

由于Bootstrap具有跨平台兼容性等特点，所以在html5的头文件中，增加一些标签，以便激活bootstrap的兼容性和跨平台性。

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewpoint" content="width=device-width,initial-scale=1">

容器标签

bootstrap有多种不同的容器标签，主要使用的是container 和container-fluid,第一种是居中布局整个页面框架，第二是全屏布局整个页面框架

    // 居中布局    <body>       <div class="container">          ....       </div>    </body>    //全局布局    <body>        <div class="container-fluid">              ....        </div>    </body>

Bootstrap 核心

栅格系统

Bootstrap将整个页面栅格成多行多列，我们可以把它想象成一个excel表格。 Bootstrap将整个页面每一行分为12列，即12个栅格，所以我们可以指定每个HTML标签占用多少栅格。在bootstrap3 和bootstrap 4有一点不同。具体如下所示。

    //整个页面分为2列， 即每一列占6个栅格     <div class="container">        <div class="row">          // bootstrap 4 语法            <div class="col-6 border border-primary">1/2</div>            <div class="col-6 border border-info">1/2</div>        </div>        <div class="row">            // bootstrap 3 语法            <div class="col-md-6 border border-secondary">1/2</div>            <div class="col-md-6 border border-dark">1/2</div>        </div>        // 栅格偏移4个，即最右边为空        // 将第三行分为3列，最右边1列轮空              <div class="col-md-offset-4 col-md-4 border border-priamry">1/3</div>              <div class="col-md-4 border border-secondary"> 1/3</div>     </div>

按钮效果

bootstrap封装了很多不同的按钮效果，主要包括default,primary,success,danger,info,warning等。代码如下：

        ...         <a class="btn btn-danger" >abc</a>         <a class="btn btn-default" >abc</a>         <a class="btn btn-primary" >cde</a>         <a class="btn btn-success" >cde</a>         <a class="btn btn-warning" >cde</a>         <a class="btn btn-info">cde</a>         ...

其他的标签

bootstrap中还有其他的标签，如 small 缩小字体标签，kbd 加粗标签,img-responsive 响应式图片等等。

        <div class="container">           <div class="row">              <header class="col-12">                     <h1>This is a <small>test</small>.</h1>                     复制快捷键:<kbd><kbd>ctrl</kbd>+<kbd>C<kbd></kbd>               </header>           </div>        </div>

table表格，添加 table table-striped table-hover等标签，在bootstarp 4 中，颜色标签包括 alert-success,alert-danger,alert-waring,alert-info等标签

    <div class="col-md-10 col-md-offset-1">                                       <table class="table table-striped">                        <thead>                           <tr >                               <th class="alert-success">header1</th>                               <th class="alert-info">header2</th>                               <th class="alert-danger">header3</th>                           </tr>                       </thead>                       <tbody class="table-hover">                           <tr class="alert-danger">                               <td>1data1</td>                               <td>1data2</td>                               <td>1data3</td>                           </tr>                            <tr>                               <td>2data1</td>                               <td>2data2</td>                               <td>2data3</td>                           </tr>                            <tr>                               <td>3data1</td>                               <td>3data2</td>                               <td>3data3</td>                           </tr>                            <tr class="alert-danger">                               <td>4data1</td>                               <td>4data2</td>                               <td>4data3</td>                           </tr>                            <tr>                               <td class="alert-success">5data1</td>                               <td class="alert-warning">5data2</td>                               <td>5data3</td>                           </tr>                       </tbody>                   </table>            </div>

标签 col-md-offset-4 与标签 col-md-pull-4 的区别。前者相当于执行了css 的margin-left , 后者则执相当于执行了css 的position 或 float 。

水平放置表单标签 .form-inline/.form-group/.form-control代码如下：

        <form class="form-inline text-center" method="Post">               <div class="form-group">                 <input class="form-control" type="text" placehold="Your name">               </div>              <div class="form-group">                <input type="text" class="form-control"/>              </div>              <button type="submit" class="btn btn-danger"></button>        </form>

垂直放置表单标签 .form-horizontal / form-group /form-control

阅读全文

0 0