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

最新推荐文章于 2022-10-06 17:57:23 发布

MeteorLife

最新推荐文章于 2022-10-06 17:57:23 发布

阅读量392

点赞数

分类专栏： js技术文章标签： bootstrap web前端开发移动互联网浏览器

本文链接：https://blog.csdn.net/shark20121222/article/details/77345648

版权

js技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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