bootstrap

最新推荐文章于 2024-08-29 14:21:21 发布
最新推荐文章于 2024-08-29 14:21:21 发布
阅读量86 收藏
点赞数
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ambition_star/article/details/103929887
版权

bootstap常用标签练习：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../static/bootstrap.min.css">
    <style>
        .container{
            height: 2000px;
            background-color: rgb(142, 237, 250);
        }
        div{
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div id="" class="container">
        <div class="row">
            <div id="" class="col-xs-4  col-sm-4 col-md-4">.col-md-4</div>
            <div id="" class="col-xs-4  col-sm-4 col-md-4">.col-md-4</div>
            <div id="" class="col-xs-4  col-sm-4 col-md-4">.col-md-4</div>
        </div>    
        <div class="row">
            <div class="col-xs-3  col-sm-3 col-md-3">.col-md-3</div>
            <div class="col-xs-6  col-sm-6 col-md-6">.col-md-6</div>
            <div class="col-xs-3  col-sm-3 col-md-3">.col-md-3</div>
        </div>
        <div class="row">
                <div class="col-xs-12  col-sm-10 col-md-10">.col-md-10</div>
                <div class="hidden-xs  hidden-sm col-md-2">.col-md-2</div>
        </div>
        <h1 class="h1">这是bootstrap中的h1
            <small class="small">这是small标签</small>
        </h1>
        <h1 class="text-center">这是一端带有<mark>高亮</mark>的文本</h1>
        <h1 class="text-capitalize"> for smon  liks  liv   </h1>
        <h1><abbr title="attribute">Phone</abbr></h1>
        <address>
            <strong>太原龙城大街 怡和广场</strong><br>
            达内科技<br>
            email:<a href="#">www.tedu.com</a><br>
            <abbr title="Phone ">P:</abbr>010-1234567
        </address>
        <blockquote>
            <p>表情包多的人，没对象</p>
            <footer >鲁迅</footer>
        </blockquote>
        <blockquote class="blockquote-reverse">
            <p>网上流传的鲁迅说过的话95%都是假的，这句也是.</p>
            <footer>鲁迅</footer>
        </blockquote>
        <ul class="list-unstyled list-inline">
            <li>以梦为马，越骑越傻</li>
            <li>坚持一定很苦，但是放弃也不舒服</li>
            <li>沉迷学习，日渐消瘦</li>
        </ul>
        <dl class="dl-horizontal">
            <dt>描述标题</dt>
            <dd>以梦为马，越骑越傻</dd>
            <dt>描述标题</dt>
            <dd>沉迷学习，日渐消瘦</dd>
        </dl>
        使用<kbd><kbd>ctrl</kbd>+<kbd>v</kbd></kbd>的方式实现批量注释
        使用<kbd>ctrl+v</kbd>的方式实现批量注释
        
            <table class=" table">
                <tr class="success">
                    <th>name</th>
                    <th>age</th>
                </tr>
                <tr class="danger">
                    <td>亚麻跌</td>
                    <td>18</td>
                </tr>
                <tr class="warning">
                    <td>mais</td>
                    <td>24</td>
                </tr>
                <tr class="active">
                    <td>asfa</td>
                    <td>35</td>
                </tr>
            </table>
   <div class="row">
       <div class="col-xs-9  col-sm-9  col-md-9"></div>
       <div class=" col-xs-9 col-sm-3  col-md-3">
            <form action="">
                    <div class="form-group">
                        <label for="uname">姓名</label>
                        <input type="text" id="uname" class="form-control">
                    </div>
                    <div class="form-group">
                            <label for="pwd">密码</label>
                            <input type="password" id="pwd" class="form-control">
                    </div>
                    <div class="checkbox">
                        <label for="a">
                            <input type="checkbox" id="a">
                            Click me
                            <span class="glyphicon glyphicon-apple"></span>
                        </label>   
                    </div>
                    <input type="submit" class="btn btn-info" value="登录">
                </form>
       </div>
        <!-- bootstrap.js依赖jquery文件   需要先引入jquery -->
    </div>    
    </div>
</body>
</html>

运行页面如下：
练习运行页面
练习运行页面

ambition_star
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap使用
m0_57774967的博客
04-24 5171
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
Bootstrap简介
归兮的博客
08-18 8999
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1797
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5405
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5046
bootstrap网页作业
Bootstrap
CJW的博客
07-28 8167
Bootstrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript，它简洁灵活，使得 Web 开发更加快捷。 基本结构 Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 行内包含列，每行最多12列。 Bootstrap 网格的基本结构： <div clas
Bootstrap educoder
qq_46675545的博客
06-12 3704
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 5169
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap 颜色
书香水墨
07-25 4677
一、Bootstrap 颜色 1.1 基本颜色 Bootstrap4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light: <di...
Bootstrap自适应
weixin_44112242的博客
04-04 9085
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷 能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
bootstrap-5.3.2-dist.zip
10-10
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网站。这个压缩包“bootstrap-5.3.2-dist.zip”包含了Bootstrap 5.3.2的分布式文件...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
CSS中禁用DOM事件
bingmoujs的博客
08-26 909
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
【CSS】选择器
最新发布
isun1的博客
08-29 1004
CSS 简介+选择器详细知识点
relation-graph实现图谱功能
qq_38599266的博客
08-29 196
【代码】relation-graph实现图谱功能。
CSS学习
2301_77205900的博客
08-28 855
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值