正文

前端之bootstrap

SetCreed  2022-02-12  803

关键词：

bootstrap介绍

布局容器

使用前端框架，所有标签样式的调整，全都是通过class属性值来的

<div class="container"></div>        左右两边留白

<div class="container-fluid"></div>  全屏显示

格栅系统

<div class="row c1"></div>

一个row就是一行，每个row默认会分成12份，通过class="col-md-num"来选择你想要占几份

根据浏览器窗口的不同，采取不同的布局方式，进行响应式布局，

col-md-num进行PC端布局，col-sm-num进行移动端布局

@media screen and (max-width: 700px){
            .c1 {
            height: 50px;
            background-color: yellow;
            border: 3px solid blue;
        }

当浏览器窗口宽度为700px时，颜色会变为黄色，这也是响应式布局

栅格系统参数 xs sm md lg

表格

常见参数：

<table class="table table-striped table-bordered table-hover">

table-striped 条纹状表格

table-bordered 带边框的表格

table-hover 鼠标悬停

表单

表单加样式，记住一个参数：form-control

按钮组

btn btn-颜色

小练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome.min.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--导航条开始-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">图书管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">图书<span class="sr-only">(current)</span></a></li>
                <li><a href="#">作者</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="关键字">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Assassin</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--导航条结束-->

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    首页
                </a>
                <a href="#" class="list-group-item">图书列表</a>
                <a href="#" class="list-group-item">作者列表</a>
                <a href="#" class="list-group-item">出版社</a>
                <a href="#" class="list-group-item">更多</a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">图书管理系统 <span class="glyphicon glyphicon-book pull-right"></span></div>
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="exampleInputAmount" placeholder="关键字">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">搜素</button>
                        <a href="" class="btn btn-primary pull-right">新增</a>
                    </form>

                    <br>
                    <br>
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                        <tr class="success">
                            <th>序号</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>价格</th>
                            <th>出版社</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>人间失格</td>
                            <td>太宰治</td>
                            <td>89.98</td>
                            <td>南方出版社</td>
                            <td>
                                <a href="" class="btn btn-primary btn-sm">编辑</a>
                                <a href="" class="btn btn-danger btn-sm">删除</a>
                            </td>
                        </tr>
                        </tbody>


                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

前端之bootstrap(代码片段)

Bootstrap简介　　Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript开发的，它因简洁、直观、功能强大被开发者广发使用。　　Boot... 查看详情

day14-前端之bootstrap框架

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前... 查看详情

前端之bootstrap框架(代码片段)

一Bootstrap简介在搭建前端页面时我们可以借用一些好的模板，为了让这些模板更好的让开发者使用，我们借助Bootstrap来实现一些常用的模板例如在看到上面这么好的模板，同学们是不是就想立刻收藏了呢？二css全局样式布局容器... 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

前端插件之bootstrapswitch选择框开关控制

简介BootstrapSwitch是一款轻量级插件，可以给选择框设置类似于开关的样式它是依赖于Bootstrap的一款插件下载下载地址在线引用导入因为它是依赖于Bootstrap的一款插件，所以，在引入之前要先引入Bootstrap样式<linkrel="stylesheet"type="... 查看详情

python学习_day62_前端基础之bootstrap全局css样式

一、布局容器　　Bootstrap需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。分别为：<divclass="container">//.container... 查看详情

前端编码规范之：样式（scss）编码规范

...，尽量保持不重复（冲突），尽量不要用id。我比较推崇bootstrap的样式目录结构，class命名方式。推荐bootstrap样式框架的编码规范，同时结合BEM命名规范，灵活使用。cl 查看详情

前端编码规范之：样式（scss）编码规范

ten——tornado操作之使用bootstrap前端框架美化项目（bootstrap的使用及font-awesome插件的使用—图标集和工具包）+静态文件的处理

使用Bootstrap前端框架1.引言：（1）Bootstrap是什么？基于HTML，CSS，JS的简洁灵活的流行前端框架及交互组件集Bootstrap·全球最流行的HTML、CSS和JS工具库为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导... 查看详情

javaweb之bootstrap(代码片段)

...数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScript文章目录1.Bootstrap概念2.快速入门3.响应式布局4.CSS样式和JS插件4.1.全局CSS样式4.2.组件4.3.插件5.案例1.Bootstrap概念概念：一个前端开发的框架ÿ 查看详情

h5框架之bootstrap

...来的时间里，我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习，以案例的形式、对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了。如果你想详细的学习Bootstrap，建议去http://noob.d8jd.com/noob/5.html这里学习... 查看详情

组件分享之前端组件——bootstrap-treeview简单的tree树组件

参考技术A近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。本次分享的组件是用于... 查看详情

css之bootstrap（快速布局）(代码片段)

简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootS... 查看详情

重修课程day54（bootstrap之css样式）

一bootstrap的介绍　Bootstrap是将html，css和js的代码打包好了，只管我们拿来调用。是基于jquery开发的。　使用BootCDN提供的免费CDN加速服务，同时支持http和https协议。CDN是一种前端的优化方式。　jquery的代码放在body标签里面的最下... 查看详情

前端常用框架

...框架,有pc端和移动端,为了方便日后自己先记录下来了...Bootstrap首先说Bootstrap，估计你也猜到会先说或者一定会有这个(呵呵了)，这是说明它的强大之处，拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自... 查看详情

前端开发之常用插件

...后开发的时候,可以拿来就用　　　　1)时间插件　　　　bootstrap-datetimepicker 　　　　　　说明:可以友好的选择日期与时间,虽然可以选择到秒查看详情

正文

前端之bootstrap

bootstrap介绍

布局容器

格栅系统

表格

表单

按钮组

前端之bootstrap(代码片段)

day14-前端之bootstrap框架

前端之bootstrap框架(代码片段)

web前端之移动端课程开发之06.bootstrap(代码片段)

web前端之移动端课程开发之06.bootstrap(代码片段)

前端插件之bootstrapswitch选择框开关控制

python学习_day62_前端基础之bootstrap全局css样式

前端编码规范之：样式（scss）编码规范

前端编码规范之：样式（scss）编码规范

ten——tornado操作之使用bootstrap前端框架美化项目（bootstrap的使用及font-awesome插件的使用—图标集和工具包）+静态文件的处理

javaweb之bootstrap(代码片段)

h5框架之bootstrap

组件分享之前端组件——bootstrap-treeview简单的tree树组件

css之bootstrap（快速布局）(代码片段)

重修课程day54（bootstrap之css样式）

前端常用框架

前端开发之常用插件

十个前端ui优秀框架