首页 > 其他分享 >BootStrap应用

BootStrap应用

时间:2022-11-05 16:33:32浏览次数:74  
标签:用户名 dd BootStrap 爱好 表单 栅格 应用 col

bootstrap框架

​ Bootstrap,来自 Twitter,是一款受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

​ 在html页面使用bootstrap,要先对文件引用.

image

bootstrap应用场景

​ 控制大小,控制颜色,12栅格排版.bootstrap常用表单样式、表格样式.

BootStrap栅格layout

​ BootStrap将网页均分为12分(12个格子),响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

案例:

<!DOCTYPE html>
<html>
<head>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">2
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">3
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">4
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">5
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(147, 45, 45); height:50px; background-color:yellow;">6
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">7
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">8
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">9
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">10
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">11
            </div>
            <div class="col-md-1" style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">12
            </div>
        </div>

        <div class="row">
            <div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
            <div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
            <div class="col-md-4" style="height: 60; border: 1px solid green;background-color: violet;">dd</div>
        </div>

        <div class="row">
            <div class="col-md-4"
                style="height: 60; border: 1px solid rgb(13, 202, 101);background-color: rgb(56, 31, 169);">dd</div>
            <div class="col-md-8" style="height: 60; border: 1px solid green;background-color: rgb(120, 16, 120);">dd
            </div>
        </div>

        <div class="row">
            <div class="col-md-6"
                style="height: 60; border: 1px solid rgb(13, 202, 101);background-color: rgb(20, 179, 25);">dd</div>
            <div class="col-md-6" style="height: 60; border: 1px solid green;background-color: rgb(16, 120, 26);">dd
            </div>
        </div>

        <div class="row">
            <div class="col-md-12"
                style="height: 60; border: 1px solid rgb(15, 16, 15);background-color: rgb(13, 14, 14);">dd</div>
        </div>

        <!--左空 col-mad-offset-2 整行改变-->
        <div class="row">
            <div class="col-md-1 col-md-offset-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

        <!--右浮动 col-mad-push-2 仅作用于单块栅格-->
        <div class="row">
            <div class="col-md-1 col-md-push-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

        <!--左浮动 col-mad-pull-2 仅作用于单块栅格-->
        <div class="row">
            <div class="col-md-1 col-md-pull-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

        <div class="row">
            <div class="col-md-6"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(36, 167, 75);">1
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4"
                        style="border:1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
                    </div>
                    <div class="col-md-4"
                        style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
                    </div>
                    <div class="col-md-4"
                        style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(156, 156, 147);">
                    </div>
                </div>
            </div>
</body>
</html>

image

使用栅格系统注意点
1 行必须放置在.container(固定宽度)或 .container-fluid (100% 宽度)中,以便获得适当的对齐alignment和内边距padding
2 使用行来创建列的水平组
3 内容应该放置在列内,唯有列可以是行的直接子元素
4 预定义的网格类,比如.row和.col-xs-x,可用于快速创建网格布局。
5 列通过内边距(padding)来创建列内容之间的间隙

栅格样式 描述
col-lg-* large 大型设备(大台式电脑,1200px 起
col-md-* middle 中型设备(台式电脑,992px 起)
col-sm-* small 小型设备(平板电脑,768px 起)
col-xs-* x-small 超小设备(手机,小于 768px)

BootStrap常用样式与标签

常用样式

样式 描述
.container 让元素在容器中水平居中
.col-md-4 占几个栅格
.col-md-offset-4 左边空出几个栅格
.col-md-push-8 向右浮动几个栅格
col-md-pull-2 向左浮动几个栅格

案例

        <!--左空 col-md-offset-2 整行改变-->
        <div class="row">
            <div class="col-md-1 col-md-offset-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

        <!--右浮动 col-md-push-2 仅作用于单块栅格-->
        <div class="row">
            <div class="col-md-1 col-md-push-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

        <!--左浮动 col-md-pull-2 仅作用于单块栅格-->
        <div class="row">
            <div class="col-md-1 col-md-pull-2"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:yellow;">1
            </div>
            <div class="col-md-1"
                style="border: 1px solid rgb(21, 20, 20); height:50px; background-color:rgb(213, 44, 72);">2
            </div>
        </div>

BootStrap常用组件

按钮组件

语法:
  <input type=button class="btn" value="我是按钮">
提示:
   btn是所有按钮的基本样式
class参数说明:
   第一个参数:btn为按钮的基本样式
   第二个参数为按钮的颜色样式
     语境⾊彩:
        btn-default 默认-⽩⾊
        btn-success 绿⾊
        btn-danger 红色
         ..
  第三个参数为按钮的大小
  
按钮还有一种默认为整行的效果,称为块级按钮 btn-block 

案例

<!DOCTYPE html>
<html>
    <head>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <button>纯生态按钮</button>
            <button class="btn btn-default">默认按钮</button>
            <button class="btn btn-info">info</button>
            <button class="btn btn-warning">warning</button>
            <button class="btn btn-danger">danger</button>
            <button class="btn btn-primary">primary标准</button>
            <button class="btn btn-link">link</button>
        </div>
    </body>
</html>

image

面板组件

​ 面板组件.panel提供基本的边界和内部,来包含内容

基本面板 && 带标题的面板

<!DOCTYPE html>
<html>
<head>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><!--或者可以占用三个格 再右移动一格-->
                <!--面板-->
                <div class="panel panel-default">
                    <!--面板头-->
                    <div class="panel-heading">
                        花边新闻
                    </div>
                    <!--面板身体-->
                    <div class="panel-body">
                        严正谈了一打女朋友
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!--面板-->
                <div class="panel panel-default">
                    <!--面板头-->
                    <div class="panel-heading">
                        招聘信息
                    </div>
                    <!--面板身体-->
                    <div class="panel-body">
                        物业招聘保安,要求四肢健全
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!--面板-->
                <div class="panel panel-default">
                    <!--面板头-->
                    <div class="panel-heading">
                        便民提示
                    </div>
                    <!--面板身体-->
                    <div class="panel-body">
                        两室一厅,拎包入住,电话18189199
                    </div>
                </div>
            </div>
</body>

</html>

image

<!DOCTYPE html>
<html>
    <head>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
           <ul class="nav nav-tabs">
            <li class="active"><a href="#">家居</a></li>
            <li><a href="#">休闲</a></li>
            <li><a href="https://www.360.com">安全</a></li>
           </ul>
        </div>
    </body>
</html>

image

胶囊式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

面包屑式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

分页式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pagination">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
</body>
</html>

翻页式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">下一页</a></li>
        </ul>
    </div>
</body>
</html>

表单

​ 将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

分类:
垂直表单 vertical(默认) class="form-vertical"
内联 [所有的表单元素显示在⼀⾏内] inline class="form-inline"
⽔平表单 horizontal [分两列,标签,元素] class="form-horizontal"
 |-label与input元素放在⼀个div class为form-group以及control-label
 |-表单元素放在<div class="col-md-x">内部,并在表单元素指定 class为form-control
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の表单控件、文本框、文本域、下拉框</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"/>
</head>
<body>
    <!-- 
        表单样式:
        1.文本框:
        form-control
        .input-lg  .input-sm:控制表单大小
     -->
    <form>
        <p>
            用户名:<input/>
        </p>
        <p>
            学历:<select>
                <option>大专</option>
                <option>大专</option>
                <option>大专</option>
            </select>
        </p>
        <p>
            用户名:<textarea></textarea>
        </p>
    </form>
    <form>
        <div class="row">
            <div class="col-md-3">
                用户名:<input class="form-control"/>
                用户名:<input class="form-control input-lg"/>
                用户名:<input class="form-control input-sm"/>
            </div>
        </div>
        <p>
            学历:<select class="form-control">
                <option>大专</option>
                <option>大专</option>
                <option>大专</option>
            </select>
        </p>
        <p>
            用户名:<textarea class="form-control"></textarea>
        </p>
    </form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の单选框、复选框</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
</head>

<body>
    <div class="container">
        <div>
            <div>
                兴趣爱好:
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
                <div class="checkbox">
                    <input type="checkbox" />爱好1
                </div>
            </div>
        </div>
        <div>
            <div>
                兴趣爱好:
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" />爱好1
                </label>
            </div>
        </div>

        <div>
            <div>
                兴趣爱好:
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
                <div class="radio">
                    <input type="radio" />爱好1
                </div>
            </div>
        </div>


        <div>
            <div>
                兴趣爱好:
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
                <label class="radio-inline">
                    <input type="radio" />爱好1
                </label>
            </div>
        </div>
    </div>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单の表单布局</title>
    <!-- 导入boostrap的css样式 -->
    <link type="text/css" rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
</head>

<body>
    <div class="container">
        <!-- 
            表单布局样式:
            .form-horizontal:设置垂直表单
            .form-inline:设置内联表单,水平显示
         -->
        <form class="form-horizontal" action="#" method="post" role="form">
            <div class="form-group">
                <label for="uname" class="control-label col-md-2">用户名</label>
                <div class="col-md-4">
                    <input name="username" id="uname" class="form-control" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="form-group">
                <label for="upwd" class="control-label col-md-2">密码</label>
                <div class="col-md-4">
                    <input name="userpwd" type="password" id="upwd" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">性别</label>
                <div class="col-md-4">
                    <label class="radio-inline">
                        <input name="sex" type="radio" class="radio" />男
                    </label>
                    <label class="radio-inline">
                        <input name="sex" type="radio" class="radio" />女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">兴趣爱好</label>
                <div class="col-md-4 checkbox-inline">
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />琴
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />棋
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />书
                    </label>
                    <label class="checkbox-inline">
                        <input name="hobby" type="checkbox" class="checkbox" />画
                    </label>

                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2">所在地</label>
                <div class="col-md-4">
                    <select class="form-control">
                        <option>湖北</option>
                        <option>湖南</option>
                        <option>河北</option>
                        <option>河南</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4 col-md-offset-3">
                    <button class="btn btn-danger">保存</button>
                </div>
            </div>
        </form>
        <form class="form-inline" action="#" method="post" role="form">
            <div class="form-group">
                <label for="uname" class="control-label col-md-4">用户名</label>
                <div class="col-md-6">
                    <input name="username" id="uname" class="form-control input-group-lg" placeholder="请输入用户名" />
                </div>
            </div>
            <div class="form-group">
                <label for="upwd" class="control-label col-md-3">密码</label>
                <div class="col-md-6">
                    <input name="userpwd" type="password" id="upwd" class="form-control input-group-sm" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>

如果你没有为输入框添加label标签,屏幕阅读器将会遇到问题。对于导航条内的表单,可以通过.sr-only class隐藏label标签。

案例:

<!DOCTYPE html>
<html>

<head>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-md-3">
                    <input type="text">
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <input type="text" class="form-control">
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <select class="form-control">
                        <option>严正</option>
                        <option>lily</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <textarea class="form-control"></textarea>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

image

标签:用户名,dd,BootStrap,爱好,表单,栅格,应用,col
From: https://www.cnblogs.com/wuyaziLeo/p/16860222.html

相关文章

  • 实验7:基于REST API的SDN北向应用实践
    (一)基本要求编写Python程序,调用OpenDaylight的北向接口实现以下功能(1)利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight;.生成拓扑sudomn--topo=single,3--......
  • [转]【终极解决方案】为应用程序池“XXX”提供服务的进程在与 Windows Process Activa
    困扰我大半年的错误,今天偶然间被解决了,特此分享给被同样问题纠结的朋友们!之前的求助帖,无人应答:http://www.cnblogs.com/freeton/archive/2012/08/28/2660585.htmlhttp:/......
  • Android 明年将不再支持 32 位应用
    上周,Google正式发布了Android13并率先向Pixel设备推送了系统更新,其他OEM厂商也将跟进这一最新系统,并会在今年晚些时候向他们旗下的设备推送更新。近日,MishaalRahma......
  • 实验3 函数应用编程
     实验任务1#include<stdio.h>#include<stdlib.h>#include<time.h>#include<windows.h>#defineN80voidprint_text(intline,intcol,chartext[]);voidprin......
  • 实验3 C语言控制语句应用编程
    #include<stdio.h>#include<stdlib.h>#include<time.h>#include<windows.h>#defineN80voidprint_text(intline,intcol,chartext[]);//函数声明voidp......
  • 实验3 函数应用编辑
    task1.c#include<stdio.h>#include<stdlib.h>#include<time.h>#include<windows.h>#defineN80voidprint_text(intline,intcol,chartext[]);voidprin......
  • 第三十七章 构建数据库应用程序 - 在页面上使用对象
    第三十七章构建数据库应用程序-在页面上使用对象CSP最强大的方面之一是,它允许创建可以直接与内置对象数据库交互的动态网页。这意味着可以快速构建以下数据库应用程序......
  • 低代码有哪些典型应用场景?
    低代码的应用场景取决于低代码平台的自身的架构体系与功能,目前大多数低代码平台还是以B端为主,即提供浏览器模式的方式提供简单的基于模块预定制、存储过程预定制之类预先......
  • [学习笔记] 概率与期望及其应用
    前言这是一篇初学者的学习笔记,可能有些不准确或者遗漏的地方,还请各位指出。可以通过目录或者Ctrl+F寻找所需内容。点击展开目录目录前言引入-蒙提霍尔问题1.......
  • 自动化利器 Ansible - 从了解到应用
    本文说明本系列使用ansible2.9.27版本来说明和汇总相关信息。#cat/etc/system-releaseRedHatEnterpriseLinuxServerrelease7.8(Maipo)##uname-aLinu......