BootStrap常用知识点（详解）

最新推荐文章于 2022-11-24 11:31:00 发布

戏子☜已入画@

最新推荐文章于 2022-11-24 11:31:00 发布

阅读量816

点赞数 2

分类专栏： springboot项目中的注意点文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/qq_55578844/article/details/121354453

版权

springboot项目中的注意点专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.在html中的模板

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <!--使⽤X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--
 viewport表示⽤户是否可以缩放⻚⾯；
 width指定视区的逻辑宽度；
 device-width指示视区宽度应为设备的屏幕宽度；
 initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
 initial-scale=1则将显示未经缩放的Web⽂档
 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap的HTML标准模板</title>
<!-- 载⼊Bootstrap 的css -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>Hello, world!</h1> 
 
 <!-- 如果要使⽤Bootstrap的js插件，必须先调⼊jQuery -->
 <script src="js/jquery-3.4.1.js"></script>
 <!-- 包括所有bootstrap的js插件或者可以根据需要使⽤的js插件调⽤　-->
 <script src="js/bootstrap.min.js"></script>
 </body> 
</html>

3.1布局容器

1.container类用于固定宽度并支持响应式布局的容器

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

//s=container-fluid类用于100%宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
</div>

3.2栅格网格系统（row 行 col列）

<div class="container">
    <div class="row">
        <div class="col-md-2">2列</div>
        <div class="col-md-10">10列</div>
     </div>
</div>

3.2.1列组合两个container 就是数据分在两行

<div class="container">
    <div class="row">
        <div class="col-md-5"></div>
    </div>
    <div class="row">
        <div class="col-md-5"></div>
     </div>
</div>

3.2.2列偏移

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-4 col-md-offset-4">4列</div>
    </div>
</div>

3.2.3列排序

<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-push-10">1列</div>
        <div class="col-md-1 col-md-pull-1">1列</div>
    </div>
</div>
//向前是 pull push向后浮动

3.2.4列嵌套

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-9 ">9</div>
                <div class="col-md-3">3</div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-10">10</div>
                <div class="col-md-2">2</div>
                <div>
                </div>
            </div>
        </div>
    </div>
    </div>

4.常用样式

4.1.1标题

<h1>bootstrap head<small>副标题</small></h1>
<div class="h1">Bootstrap标题<span class="small">副标题</span></div>

4.1.2段落

<p class="lead"><small>副标题的样式文字</small><b>加粗</b><i>斜体</i></p>

4.1.3强调文字

<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
div标签都是独自占用一行

4.1.4对齐效果(.text-justify:两端对齐。)

<p class="text-left">居左</p>
<p class="text-center">居中</p>
<p class="text-justify">网格系统把容器分为12分通过媒体查询实现强大的响应式的网格系统</p>

4.1.5列表

无序列表，有序列表，定义列表

1.去点列表

<ul class="list-unstyled">
    <li>无序列表一</li>
    <li>无序列表二</li>
</ul>

2.内联列表（垂直列表换为水平列表，保持水平成为水平导航）

<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
</ul>

4.1.6代码表示

1.单行内联代码

<code>单行代码</code>

2.快捷键按钮样式

<p>使用<kbd>ctrl+s</kbd>保存</p>

3.多行代码块

<pre>
public class Helloworld{
    public static void main(){
        System.out.println("helloWorld");
       }
}
</pre>
<--!
显示html标签需要使用时应字符实体
<:  &lt   >  :&gt  来替换

使用<pre class="pre-scrollable">可以出现滚动条的效果

<pre class="pre-scrollable">
    <ol>
        <li>..........</li>
        <li>..........</li>
        <li>..........</li>   
        <li>..........</li>
    </ol>
</pre>

5.1表格

bootstrap给表格table4种附加样式的表格风格

1.table-striped:斑马线风格

2.table-bordered：带边框的表格

3.table-hover：悬停高亮表格

4.table-condensed：紧凑型的表格

<table class="table table-bordered table-hover">
    <tr class="active">
    <th>数据库</th>
    <th>java</th>
    </tr>
    <tr class="danger">
    <th>数据库</th>
    <th>java</th>
    </tr>
    <tr class="success">
    <th>数据库</th>
    <th>java</th>
    </tr>
</table>

5.2表单

5.2.1表单控件（输入框 text，下拉选择select，文本域textarea，复选框checkbox，单选框radio，表单 button，）

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control"/>
    <input type="text" name="" id="" class="form-control input-lg">//较大
    <input type="text" name="" id="" class="form-control input-sm">//较小
</div>

多行选择设置 multiple="multiple"

<div class="col-md-3">
      <select class="form-control">
        <option>北京</option>
        <option>上海</option>
       </select>
       <select class="form-control" multiple="multiple">
         <option>北京</option>
         <option>上海</option>
        </select>
</div>

<div class="col-md-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

<!--垂直表示-->
<div>
    <div class="checkbox">
        <label><input type="checkbox">游戏</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox">学习</label>
    </div>
</div>
水平表示
<div>
    <label class="checkbox-inline">
          <input type="checkbox">游戏
    </label>
     <label class="checkbox-inline">
        <input type="checkbox">学习
     </label>
</div>

//垂直表示
<div>
    <div class="radio">
        <label><input type="radio">学习</label>
     </div>
    <div calss="radio">
        <label><input type="radio">编程</label>
    </div>
</div>
//水平表示
<div>
    <label class="radio-inline">
        <input type="radio">学习
    </label>
    <label class="radio-inline">
        <input type="radio">编程
    </label>
</div>

按钮的实现

<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>

支持多标签

<a href="#" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span按钮按钮</span>
<div class="btn btn-warning">div标签按钮</div>

按钮大小.btn-xs 超小按钮 .btn-sm 小型按钮 .btn-primary正常按钮 .btn-lg大型按钮

<button class="btn btn-primary btn-xs">超小按钮 </button>
<button class="btn btn-primary btn-sm">小型按钮 </button>
<button class="btn btn-primary btn-lg">大型按钮 </button>

按钮禁用

<button class="btn btn-danger" disabled="disabled">禁用按钮</button>
<button class="btn btn-danger disabled">禁用按钮 </button>
//第二种只是样式上禁用了，并不是真正的禁用了这个按钮

5.2.2表单布局(重点应用)

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

标签控件放到带有class.form-group的<div>中，这是获取做大间距必须的

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

水平表单  //form-horizontal
<form action="#" class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
//表单中的表单元素组
    <div class="form-group">
//label中的for与下边表单元素id形成聚焦
        <label for="email" class="control-label col-sm-2">邮箱</label>
        <div class="col-sm-8">
            <input type="text" id="email"class="form-controll" placeholder="请输入邮箱">
        </div>
    </div>
    <div class="form-group">
          <label for="upwd" class="control-label col-sm-2">密码</label>
          <div class="col-sm-8">
              <input rype="password" id="upwd" class="form-control" placeholder="请输入密码">
          </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2">爱好</label>
        <div class="col-md-8">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby">唱
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby">跳
            </label>
        </div>
    </div>

    <div class="from-group">
        <label class="control-label col-md-2">城市</label>
        <div class="col-md-8">
         <select class="form-control">
            <option>请输入城市</option>
            <option>上海</option>
            <option>北京</option>
          </select>
     </div>
     <div class="form-group">
        <label for="remark" class="from-label col-md-2">简介</label>
        <div class="col-md-8">
            <textarea id="remark" class="form-control"></textare>
        </div>
      </div>
</form>

缩略图

<div class="container">
    <div class="row">
     <div class="col-md-3">
        <div class="thumbnail">
            <img src="img/jay.jpeg" style="width: 240px;height: 360px;">
            <h3>周杰伦</h3>
            <p>介绍</p>
            <button class="btn btn-primary">
                  <span class="glyphicon glyphicon-heart"></span>喜欢
            </button>
            <button class="btn btn-primary">
                  <span class="glyphicon glyphicon-pencil"></span> 评论
            </button>
        </div>
      </div>
</div>

面板

<div class="panel panel-warning">
    <div class="panel-heading">
    </div>
    <div class="panel-body">
    </div>
</div>

5.1导航

标签式的导航菜单
<ul class="nav nav-tabs">
    <li class="active"><a href="#">home</a></li>
    <li><a href="#">svn</a></li>
</ul>

分页式的导航菜单
<ul class="nav nav-pills">
    <li class="active"><a href="#">home</a></li>
<li><a href="#">svn</a></li>
</ul>

5.2分页导航

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

5.3下拉菜单

1..引入bootstrap的css文件

2..引入jquery的核心js文件 3..引入bootstrap的js文件

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

5.4模态框****

1.通过按钮打开模态框

2.使用js打开模态框

$('#myModal').modal('show') 关闭使用hide

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">
            <div class="form-group">
                <label for="uname"class="contro-label col-md-2">
                  姓名  
                </label>
                <div class="col-md-8">
                    <input type="text" id="uname" class="form-control"/>
                </div>
                </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="submit" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    $('btn').click(function(){
    $("myModal").modal("show");
});
    $("#submit").click(function(){
    $("myModal").modal("hide");
})


</script>

戏子☜已入画@

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap常用知识点（详解）

1.在html中的模板<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- viewport表示⽤户是否可以缩放⻚⾯； width指定
复制链接

扫一扫