bootstrp的一些小点点

最新推荐文章于 2022-11-01 14:46:04 发布
最新推荐文章于 2022-11-01 14:46:04 发布
阅读量248 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37110098/article/details/79184802
版权

Bootstrap，来自 Twitter，emmm听说是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它有自带的css样式，也可以在此基础上自己添加css。emmmm 这两天练习了一下，并没有感觉有多么的简单，噗~~~

1.bootstrp模版

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2.dropdown

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle = "dropdown">dropdown<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labrlledby="dropdownMenu1">
            <li class="dropdown-header">Dropdown header</li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li class="disabled"><a href="#">Disabled link</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

3.按钮组

<div class="btn-group">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
    </div>

    <div class="btn-toolbar" role="toolbar" aria-label="...">
      <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
      <div class="btn-group btn-group-sm" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
      <div class="btn-group btn-group-xs" role="group" aria-label="...">
        <button class="btn btn-default">向左</button>
        <button class="btn btn-danger">中间</button>
        <button class="btn btn-default">向右</button>
      </div>
    </div>

4、分裂式下拉菜单

<div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <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>
    </div>
    <br />
    <br />
    <br />
    <div class="btn-group dropup">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <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>
    </div>

5.inputgroup

<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" placeholder="Username"/>
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Username"/>
        <span class="input-group-addon">@</span>
    </div>
    <div class="input-group">
        <span class="input-group-addon">email</span>
        <input type="text" class="form-control" placeholder="Username"/>
        <span class="input-group-addon">Sure</span>
    </div>

6.表单

<form action="" method="post" role="form">
        <div class="form-group">
            <label for="username">用户名</label>
            <input name="username" id="username" type="text" class="form-control"><br />
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input name="password"  id="password" class="form-control"><br />
        </div>
        <div class="btn-group">
            <input type="submit" class="btn btn-success"/>
            <input type="reset" class="btn btn-danger" />
        </div>

    </form>

7.垂直表单

<span>按钮一</span> <span>按钮二</span> <span>按钮三</span>
    <form  class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="exampleInputEmail3">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
          </div>

          <div class="form-group">
            <label class="sr-only" for="exampleInputPassword3">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        <button type="submit" class="btn btn-default">Sign in</button>
    </form>

8.横向表单

<form class="form-horizontal">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
      </div>
      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign in</button>
        </div>
      </div>
    </form>

9.导航

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>
        <ul class="nav nav-pills nav-justified" role="tablist">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              ...
            </ul>
        </li>
    </ul>

10.导航条

<nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">
                    <img alt="Brand" src="img/01.png" />
                </a>
            </div>

        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">Sign in</button>
        <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
        </div>
    </nav>

11.控件

    <form role="form" style="width: 400px;">
        <input type="date" class="form-control" />
        <input type="email" class="form-control" />
        <input type="color" />
        <input type="url" />
        <input type="submit" />

    </form>

    <form>
      <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" disabled="disabled">
      <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" readonly="readonly">

    </form>

12.栅格系统

<div class="container"> 
        <div class="row">
            <div class="bg-primary col-sm-2">A</div>
            <div class="bg-success col-sm-2">B</div>
            <div class="bg-info col-sm-2">C</div>
        </div>
    </div>
机智小铛铛i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap常用类
qq_42041288的博客
08-06 875
bootstrap常用类 一．文本 1）对齐方式 text-left 文本左对齐 =======> text-align：left text-center 文本居中对齐 text-right 文本右对齐 text-justify 文本两端对齐 text-nowrap 不换行 text-lowercase 小写 text-uppercase 大写 text-capitalize 首字母大写 2...
bootstrap-4.6.2
06-13
这通常意味着它包含了自4.6.1以来的一些修复、改进和可能的新特性。 描述中的"bootstrap4下载"提示我们这个压缩包可能包含Bootstrap 4.6.2的源代码或者预编译的文件，适合开发者直接在项目中使用或学习。 在标签中...
bootstrap中的col
小黑鹅的专栏
12-26 4228
作用：根据屏幕大小，选择布局样式。 基础： col是column简写：列； -* 表示占列数，即占每行row分12列栅格系统比； 具体： xs是maxsmall简写：超小                         col-xs-* 超小屏幕如手机 （&lt;768px）时使用 sm是small简写：小                                  col-sm...
bootstrp实战（2）--LARACON2018主页
机智小铛铛的博客
01-28 1837
第二个页面，，部分还没能完全响应 网页中 img2文件夹以及源码链接https://pan.baidu.com/s/1dHniQFf <!-- index.html Created by 命_心 on 2018-01-23. Copyright 2018 命_心. All rights reserved. --> html lang="zh-CN"
bootstrap 有省略点才显示tooltip
Keep It Simple, Stupid
06-02 4165
让太长的文本显示省略点如果table中的td内容太长了可以使用省略点，给td标签增加如下类：.autocut { max-width:180px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-over
用rem单位做网页时 文字内容超出溢出用点点点(…)省略号或者直接省略该怎么写
nuanpang的博客
04-25 1339
用rem单位做网页时 文字内容超出溢出用点点点(…)省略号或者直接省略该怎么写
bootstrap轮播图 原点变为方块,Bootstrap 4-将轮播指示器更改为点
weixin_29671137的博客
12-19 391
I am using Bootstrap 4 Beta 2 version to do a carousel. The code looks like below:And the carousel indicator show as lines:Is there a way I can change the indicators into dots instead of lines? I woul...
前端基础之《Bootstrap（3）—全局CSS样式_排版、代码、表格和按钮》
csj50的专栏
11-01 300
将table包裹在中，缩小屏幕会出现水平滚动条。6、响应式表格（.table-responsive）10、无样式列表（.list-unstyled）5、紧缩表格（.table-condensed）3、带边框（.table-bordered）11、内联列表（.list-inline）2、条纹状（.table-striped）4、鼠标悬停（.table-hover）1、标题（.page-header）3、标记。
BootStrap框架的使用及响应式网页布局
wsl636969的博客
05-23 2024
1.BootStrap 概念：将常见效果进行统一封装后形成的框架。 特点：基于框架开发，效率高，稳定性高。 关于Bootstrap：前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写网页。 中文网址: https://www.bootcss.com/ 进入网站主页，选择Bootstrap3（企业开发一般用旧版本，更稳定。） 选择下载Bootstrap 点击下载Bootstrap、下载Sass项目
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
前端 bootstrap 5.3.2
01-24
Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
基于Springboot和Vue的数码论坛系统设计与实现-源码 数码论坛系统设计与实现代码（高分毕设）
最新发布
07-24
数码论坛系统设计与实现-源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
java程序设计—JAVA局域网飞鸽传书软件设计与实现(源代码+论文)43.rar
07-24
java程序设计，可供正在学习的同学研究参考。
年终总结汇报PPT模板(20)三套材料.pptx
07-24
年终总结汇报PPT模板(20)三套材料.pptx
ListView侧边A-Z快速定位导航.zip
07-24
ListView侧边A-Z快速定位导航
java程序设计—JAVA文件传输(论文+源代码)59.rar
07-24
java程序设计，可供正在学习的同学研究参考。
Bootstrap入门指南
"Bootstrap1111 - Bootstrap官方文档" Bootstrap是世界上最受欢迎的前端开发框架之一，由Twitter的开发者创建并开源。它提供了一系列预先设计的CSS和JavaScript组件，用于快速构建响应式、移动优先的网页。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值