主页 > 前端开发 > Bootstrap >

BootStrap基本使用

时间：2020-03-19  编辑：


<!DOCTYPE html><html>
  <head>
    <title>Demo</title>

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

  </head></html>注意引入的顺序

全局样式

BootStrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。

标题
class="h1~h6"
<small>小标题</small>
<!DOCTYPE html><html>
  <head>
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js" ></script>
    <script src="js/bootstrap.min.js"></script>
  </head>

  <body>
        <%--传统的方式--%>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>

        <%--BootStrap提供的class样式--%>
        <span class="h1">标题1<small>小标题</small></span>
        <span class="h2">标题2</span>
        <span class="h3">标题3</span>
        <span class="h4">标题4</span>
        <span class="h5">标题5</span>
        <span class="h6">标题6</span>
  </body></html>


效果

文本段落
BootStrap中的P标签
  默认文字大小：14px
  行高：20px
  底部外边距：10px

文本内容的对齐方式  class="text-left"  class="text-center"  class="text-right"

文本大小写转换  class="text-lowercase"  class="text-uppercase"  class="text-capitalize"

文本标记
  <mark>使文字底部有黄线</mark>
  <del>删除线</del>
  <ins>下划线</ins>
  <strong>加粗加重</strong>
  <small>文本缩小显示</small>
  <body>
        <p class="text-right">
            一袭白袍的陈平安“忘我”出拳，格外行云流水。<br>
            不再是窑工学徒拉坯，处处古板匠气如楷书，已如大家风流之行书。<br>
            <small>其中精髓，唯有吃得住苦、抓得住福而已。</small>
        </p>

        <p class="text-center">
            <mark>一袭白袍</mark>的陈平安<del>“忘我”</del>出拳，格外行云流水。<br>
            不再是<ins>窑工学徒拉坯</ins>，处处古板匠气如楷书，已如大家风流之行书。<br>
            <strong>其中精髓，唯有吃得住苦、抓得住福而已。</strong>
        </p>

        <p class="text-left text-uppercase" >
            Accept what was and what is, 
            and you’ll have more positive energy to pursue what will be.        </p>
  </body>


效果

表格
<table class="table table-striped table-bordered table-hover text-center">
  table：默认将表格样式铺满屏幕
  table-striped：斑马线效果
  table-bordered：表格边框
  table-hover：鼠标经过变色
  
行样式
  <tr class="danger">
  <tr class="info">
  <tr class="active">
  <tr class="warning">
  <tr class="success">
<!DOCTYPE html><html><head>
    <title>Demo</title>

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

    <style type="text/css">
        .table {            width: 50%;            margin: 0 auto;            margin-top: 10px;
        }    </style></head><body><table class="table table-striped table-bordered table-hover text-center">
    <thead>
    <tr>
        <td>标题1</td>
        <td>标题2</td>
        <td>标题3</td>
        <td>标题4</td>
        <td>标题5</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>

    <tr class="danger">
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>

    <tr class="info">
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>

    <tr class="active">
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>

    <tr class="warning">
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>

    <tr class="success">
        <td>内容1</td>
        <td>内容2</td>
        <td>内容3</td>
        <td>内容4</td>
        <td>内容5</td>
    </tr>
    </tbody></table></body></html>


效果

表单
输入框

BootStrap主张将相同组的控件统一放到一个div中方便管理
提供了form-group
<div class="form-group has-error">    <label class="control-label">用户名：</label>
    <input type="text" class="form-control input-sm" placeholder="用户名"></div>class="form-control input-sm input-lg"
  可以作用在文本域，select
  form-control：输入框会编程圆角，有蓝色选中状态
  input-sm：让输入框变得更大
  input-lg：更小


让表单内容横向显示
<form class="form-inline"></form><label class="sr-only">：隐藏label
<body><form class="form-inline">
    <div class="form-group has-error">
        <label class="control-label">用户名：</label>
        <input type="text" class="form-control input-sm" placeholder="用户名">
    </div>

    <div class="form-group">
        <label class="sr-only">选项</label>
        <select class="form-control">
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
        </select>
    </div>

    <div class="form-group">
        <label>具体信息</label>
        <textarea class="form-control"></textarea>
    </div></form></body>


效果

Button<input type="button" class="btn btn-default active" value="DemoButton">
  active：按钮激活
  disabled：按钮禁用
  btn-default：按钮默认样式
  btn-info：信息按钮
  btn-warning：警告按钮
  btn-success：成功按钮
  btn-danger：危险按钮
  btn-link：链接按钮  
<a class="btn btn-info">测试</a>
<form class="form-inline">
    <input type="button"
           class="btn btn-default active" value="Default"
           style="margin: 10px 10px">

    <input type="button" class="btn btn-info disabled" value="Info">

    <input type="button" class="btn btn-warning" value="Warning">
    <input type="button" class="btn btn-success" value="Success">
    <input type="button" class="btn btn-danger " value="Danger">
    <input type="button" class="btn btn-link" value="Link">

    <a class="btn btn-info">测试</a></form>


效果

响应式设计
ViewPort
<head>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title></head>width：控制 viewport 的大小，可以指定的一个值，如 600。
也可以指定特殊的值，如 device-width：设备的宽度。
height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次加载的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
栅格布局
当屏幕到达预设宽度时，改变屏幕的显示

1.传统方式<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">
        .test {            width: 300px;            height: 200px;            background: red;
        }


        当屏幕宽度小于900时显示
        @media screen and (max-width: 900px) {            .test {                width: 100%;                height: 100px;                background: blue;
            }
        }    </style></head><body>
    <div class="test"></div></body>2.  BootStrap<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">
        .test {            height: 300px;            background: red;
        }    </style></head><body>
    <div class="test col-lg-3 col-sm-2"></div></body>col-lg-3：大屏的时候占三分之一
col-sm-2：小屏的时候占二分之一
BootStrap组件
字体图标
BootStrap提供了许多字体图标用以使用<body>
    <button class="btn btn-info" style="margin: 10px 10px">
        <span class="glyphicon glyphicon-star"></span>
        Info Button    </button></body>


下拉菜单
<body>

    <div class="dropdown" style="margin: 10px 10px;">
        <button class="btn btn-info" data-toggle="dropdown">
            下拉按钮            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu">
            <li>
                <a href="https://wwww.baidu.com">百度</a>
            </li>
            <li>
                <a href="https://wwww.google.com">Google</a>
            </li>
        </ul>
    </div></body>data-toggle="dropdown"：用来关联下拉列表


控件组
<body>    <div class="input-group form-group" style="margin: 10px 10px;">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control">
    </div></body>


导航
<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="">导航1</a></li>
        <li><a href="">导航2</a></li>
        <li><a href="">导航3</a></li>
    </ul>

    <ul class="nav nav-pills" style="margin-top: 20px">
        <li class="active"><a href="">导航1</a></li>
        <li><a href="">导航2</a></li>
        <li><a href="">导航3</a></li>
    </ul>

    <ul class="nav nav-pills nav-stacked" >
        <li class="active"><a href="">导航1</a></li>
        <li><a href="">导航2</a></li>
        <li><a href="">导航3</a></li>
    </ul></body><ul class="nav nav-tabs">：一般导航样式<ul class="nav nav-pills">：胶囊导航样式<ul class="nav nav-pills nav-stacked" >：垂直导航栏


分页
<body>
    <nav>
        <ul class="pagination">
            <li class="active">
                <a href="">1 </a>
            </li>

            <li>
                <a href="">2</a>
            </li>

            <li>
                <a href="">3</a>
            </li>
        </ul>
    </nav></body>


进度条
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">
        body{            margin: 10px;
        }        .progress{            width: 15%;
        }    </style></head><body>
    <div class="progress">
        <div class="progress-bar progress-bar-danger progress-bar-striped"
             style="width: 60%">
            60%        </div>
    </div></body>


列表
<body>
    <ul class="list-group">
        <li class="list-group-item active">
            Item1            <span class="badge">20</span>
        </li>
        <li class="list-group-item">
            Item2            <span class="badge">17</span>
        </li>
        <li class="list-group-item">
            Item3            <span class="badge">15</span>
        </li>
    </ul></body>


面板
<body>
  <div class="panel panel-default">
      <div class="panel-heading">
          弹出层      </div>
      <div class="panel-body">
          内容      </div>
      <div class="panel-footer">
          脚注      </div>
  </div></body>

以上就是BootStrap基本使用的详细内容，更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章！

分享至：

分享到QQ空间 分享到朋友社区 新浪微博分享

SITE MAP

扫一扫，关注公众号