html日记——使用强大的BootStrap（1）

最新推荐文章于 2020-09-07 17:50:14 发布

饥渴计科极客杰铿

最新推荐文章于 2020-09-07 17:50:14 发布

阅读量1.9k

点赞数 1

分类专栏： html 文章标签： html bootstrap 响应式布局

本文链接：https://blog.csdn.net/qq_32198277/article/details/52088708

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西

1.编写头部

<head>
    <meta charset="UTF-8">
    <!--为了让ie采用最新的渲染模式，要把这个标签添加上-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对响应式布局，首先获取设备的物理宽度，根据设备物理宽度设置网页宽度，按照1:1缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LearnBootstrap</title>
    <!--直接引用文件-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!--引用cdn地址-->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!--为了支持ie9以下，要加上这些-->
    <!--[if lt IE 9]>
    <!--让他支持h5标签-->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!--让他支持媒体查询，也就是响应式-->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <!--[endif]-->
</head>

2.引入js

这个可以写在body

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

3.使用container类
container类是一个常用的div类
主要是用居中功能

<div class="container">hello</div>

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下

<div class="row">
    <!--xs表示在手机上，sm表示在平板上，md表示在桌面上。后面的数字表示占多少列，满屏为12列-->
    <!--内容超过栅格高度，则会增加高度，不会增加宽度-->
    <!--offset表示向右移动几列-->
    <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-4">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
    <!--push向后移动，pull向前移动-->
    <div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4</div>
</div>

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

<div class="container">
    <!--响应式表格，内容太长可以左右移动-->
    <div class="table-responsive">
        <!--table 后几个分别是表格有边框，鼠标经过tbody行时颜色加深，表格紧缩-->
        <table class="table  table-bordered table-hover table-condensed">
            <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
            </thead>
            <tbody>
            <!--该行颜色为浅绿-->
            <tr class="success">
                <th>表格内容</th>
                <th>表格内容</th>
                <th>表格内容</th>
            </tr>
            <!--该行颜色为浅蓝-->
            <tr class="info">
                <th>表格内容</th>
                <th>表格内容</th>
                <th>表格内容</th>
            </tr>
            <!--该行颜色为米白-->
            <tr class="warning">
                <th>表格内容</th>
                <th>表格内容</th>
                <th>表格内容</th>
            </tr>
            </tbody>
        </table>
    </div>
</div>

如果是想某一格变颜色也可以在th标签内加类像tr一样

4.使用表单

最基本的用法如下

<div class="container">
    <form>
        <!--的部分项是一个form-group的父布局，里面有label和input-->
        <div class="form-group">
            <!--label的for要和input的id对应-->
            <label for="exampleInputEmail1">Email address</label>
            <!--input的class要设为form-control-->
            <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>
</div>

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度
如

<div class="container">
    <!--让每一个form-group显示一行，不过每个form-group的子项都要规定宽度-->
    <form class="form-horizontal">
        <div class="form-group">
            <label for="Emai" class="col-md-2 control-label">Email</label>
            <!--input-group让提示和补充显示在同一行-->
            <div class="col-md-10">
                <input class="form-control" type="email" placeholder="Email" id="Emai">
            </div>
        </div>
        <div class="form-group">
            <label for="Passwor" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input class="form-control" type="password" placeholder="Password" id="Passwor">
            </div>
        </div>
        <button type="submit" class="btn btn-primary col-md-offset-2">summit</button>
    </form>
</div>

我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能

<div class="container">
    <form>
        <!--父div的类要增加两项-->
        <!--成功状态-->
        <div class="form-group has-success has-feedback">
            <label class="control-label" for="inputSuccess2">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <!--右边的图标-->
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <!--这个信息隐藏，增加了代码的可读性-->
            <span id="inputSuccess2Status" class="sr-only">(success)</span>
        </div>
        <!--警告状态-->
        <div class="form-group has-warning has-feedback">
            <label class="control-label" for="inputWarning2">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
            <span id="inputWarning2Status" class="sr-only">(warning)</span>
        </div>
        <!--错误状态-->
        <div class="form-group has-error has-feedback">
            <label class="control-label" for="inputError2">Input with error</label>
            <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
            <span id="inputError2Status" class="sr-only">(error)</span>
        </div>
    </form>
</div>

5.按钮

按钮是必不可少的一样东西

<!-- 白色背景 -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- 蓝色背景 -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- 绿色背景 -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- 浅蓝色背景 -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- 橙黄色背景 -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- 红色背景 -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

类中还可以添加尺寸

    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>

以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了

饥渴计科极客杰铿

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html日记——使用强大的BootStrap（1）

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西1.编写头部<head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"
复制链接

扫一扫

专栏目录