正文

58-前端-bootstrap

电竞杰森斯坦森  2022-02-13  391

关键词：

前端框架Bootstrap

该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本

Bootstrap中文网：https://www.bootcss.com/
Bootstrap中文网的v3版本：https://v3.bootcss.com/
SweetAlert 警示框：http://lipis.github.io/bootstrap-sweetalert/
fontawesome 字体图标：http://www.fontawesome.com.cn/

注意

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery

布局容器

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

<div class="container-fluid">
            左右两侧没有留白
</div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面

栅格系统

<div class="row"></div>
写一个row就是将所在的区域划分成12份

<div class="col-md-6 ">  获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法

排版

bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

效果一样，但是标签表达的意思不一样（语义）

表格

<table class="table table-hover table-striped table-bordered">
        
<tr class="success">
            <td>1</td>
            <td>jason</td>
            <td>123</td>
            <td>study</td>
</tr>

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表单

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登陆页面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>
            <p>
                <select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>

# 针对表单标签 加样式就用form-control
    class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""

# 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
    username:
  <input type="text" class="form-control">
</p>

按钮

<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>


<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">  
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

图表

<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>


    <style>
        span {
            color: greenyellow;
        }
    </style>

# 扩展

导航条

<nav class="navbar navbar-inverse">
<nav class="navbar navbar-default">

分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <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>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

弹框

https://lipis.github.io/bootstrap-sweetalert/
  
  
swal(‘你还好吗?‘)
undefined
swal(‘你还好吗?‘)
undefined
swal(‘你还好吗?‘,‘我不好，想你了!‘)
undefined
swal(‘你还好吗?‘,‘我不好，想你了!‘,‘success‘)
undefined
swal(‘你还好吗?‘,‘我不好，想你了!‘,‘warning‘)
undefined
swal(‘你还好吗?‘,‘我不好，想你了!‘,‘error‘)
undefined
swal(‘你还好吗?‘,‘我不好，想你了!‘,‘info‘)
undefined
# 我们在后面的课程中 还会涉及到该部分内容

前端——bootstrap

Bootstrap介绍Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。以前自己写的html的缺点:命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、... 查看详情

前端笔记?bootstrap

Bootstrap框架：　　里面封装了很多组件、字体图标、和标签常用的一些样式。我们直接使用即可。下载地址:http://www.bootcss.com/包下载地址（用于生产环境的Bootstrap）：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.z... 查看详情

前端bootstrap案例：轮播图(代码片段)

bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例查看详情

前端bootstrap案例：导航栏(代码片段)

bootstrap简介--目前最受欢迎的前端框架

Bootstrap，是目前最受欢迎的前端框架。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap是由Twitter的MarkOtto和JacobThornton开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。Bo... 查看详情

前端基础bootstrap

1.bootstrap的特点1）bootstrap的兼容性可以兼容现在所有的浏览器，包括ie7以及ie82）bootstrap：响应式布局可以支持pc端的各种分辨率的显示，也支持移动端3）组件Bootstrap提供了很多的组件，方便使用者4）内置jQuery组件Bootstrap提供了... 查看详情

前端基础06bootstrap框架(代码片段)

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。Bootstrap下载官方地址：https://getbootstrap.com中文地址：http://www.bootcss.com/Bootstrap环境搭建bootstrap-3.3.7-dist/├──css//CSS文件│├──bootstrap-theme.css//Bootstrap主题样式查看详情

bootstrap前端框架介绍

Bootstrap简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML/JavaScript框架。Bootstrap是基于HTML5和CSS3开发的，包含丰富的组件，根据这些组件可以快速的搭建一个漂亮... 查看详情

前端之bootstrap

bootstrap介绍详情见：bootstrap布局容器使用前端框架，所有标签样式的调整，全都是通过class属性值来的<divclass="container"></div>左右两边留白<divclass="container-fluid"></div>全屏显示格栅系统<divclass="... 查看详情

前端之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介绍

http://v3.bootcss.com/Bootstrap优点：下载： Bootstrap引入<metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="dist/css/bootstrap.min.css"rel="stylesheet">&l 查看详情

前端框架

Bootstrap 教程Bootstrap，来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。本教程将向您讲解Bootstrap框架的基础，通过学习这些内容，您将可以轻松地创建Web项目。... 查看详情

it-前端--bootstrap30篇--快速入门

快速入门bootstrap 查看详情

在html网页中引入bootstrap前端框架

Bootstrap百度百科介绍： Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。它由Twitter的设计师MarkOtto和JacobThornton合... 查看详情

前端框架bootstrap(响应式布局)入门(代码片段)

　　Bootstrap,是基于HTML,CSS.javascript的前端框架　　该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.)　　开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现.... 查看详情

前端bootstrap案例：网格系统鼠标悬浮动画显示响应式布局(代码片段)

吴裕雄bootstrap前端框架开发——bootstrap图片(代码片段)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Bootstrap实例-图像</title><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/boo 查看详情