Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

最新推荐文章于 2021-09-02 19:18:01 发布
最新推荐文章于 2021-09-02 19:18:01 发布
阅读量160 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ChengWenHao/p/BootstrapPart2.html
版权

Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

1. Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕尺寸的增加，系统会自动分为最多12列。

举例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container" style="background-color: #6AC239;">
      <div class="row">
        <div class="col-lg-4" style="border:1px solid black;">
          第一列
        </div>
        <div class="col-lg-4" style="border:1px solid black;">
          第二列
        </div>
        <div class="col-lg-4" style="border:1px solid black;">
          第三列        
        </div>
      </div>
      <div class="row">
        <div class="col-lg-3" style="border:1px solid black;">
          第一列
        </div>
        <div class="col-lg-3" style="border:1px solid black;">
          第二列
        </div>
        <div class="col-lg-3" style="border:1px solid black;">
          第三列        
        </div>
        <div class="col-lg-3" style="border:1px solid black;">
          第四列        
        </div>
      </div>
 </div>
</body>
</html>

实现效果：

 

 2.  一些进行 Bootstrap 排版类的样式

 

3. <abbr> 元素，<blockquote>引用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <abbr title="World Wide Web">WWW</abbr><br>
 <blockquote class="pull-right">
  学海无涯。
  <small>来自于<cite title="Source Title">小胡子语录</cite></small>
</blockquote>
</body>
</html>

实现效果：

 

转载于:https://www.cnblogs.com/ChengWenHao/p/BootstrapPart2.html

aitcq60826
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap的网格系统
lucky_ly的博客
05-26 2003
1.bootstrap的栅格系统 bootstrap包含了一个响应式的，移动设备优先，不固定的网格系统，可以随着屏幕的伸缩，改变列的大小和数量，同行最多12列。 代码使用@media根据屏幕的大小控制样式。 网格样式有4中类型，分别对应4中不同尺寸范围的屏幕样式， .col-xs- 设备小于768px .col-sm- 大于768px .col-md- 大于992px .col-lg- 大于12...
<blockquote>标签，长文引用
BlueSkyandwhitecloud的博客
08-18 392
blockquote标签的使用 h3{ text-align:center; } 心似桂花开 大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？ “暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。”这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。
Bootstrap——网格系统实例
Flora_SM的博客
01-24 1280
一：网格布局 解释： 网格中的每一行是由 12 个单元组成的，则可以使用这些单元定义列的尺寸，即要保证列之和为12. Bootstrap 在超小型设备中，会查找带有xs的类并使用它们，在小型设备中，会查找带有sm的类并使用它们，在中型设备中，会查找带有 md 的类并使用它们。在大型设备中，会查找带有 lg 的类并使用它们,即类中都写上，它会自动根据设备选择相应的那个类。 下面此例中提供了 ...
bootstrap简单使用(一) 网格系统和排版
GinChou的萌新博客
12-30 332
https://www.runoob.com/bootstrap/bootstrap-tutorial.html 菜鸟教程 bootstrap的讲解 记录网格系统和排版的标签代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例...
bootstrap基本整理1
weixin_30617737的博客
01-12 89
目录 bootstrap基本整理<1> bootstrap简介 boostrap CSS bootsrap概述 bootstrap设定文档类型 移动设备优先 列偏移 列嵌套 bootstr...
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
<script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-editable.js"></script> <script> $(function () { $('#table').bootstrapTable(); }); </...
bootstrap-4-grid：Bootstrap 4网格系统和布局实用程序
01-31
Bootstrap 4网格系统（Flex） Bootstrap v4.4.1网格系统和布局实用程序。包含什么为什么？ 这是Bootstrap 4当前不提供的功能：如果您不需要上述任何一项，那么Bootstrap 4已经包含了带有捆绑包的仅网格版本。如何...
bootstrap-select-1.13.14
最新发布
06-05
<script src="path/to/bootstrap.min.js"></script> <script src="path/to/bootstrap-select.min.js"></script> ``` 然后，为 select 元素添加 `data-toggle="select"` 属性来激活插件： ```html <select class=...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap 3的核心组件包括网格系统、表单、按钮、导航、模态、图像以及各种JavaScript插件，如下拉菜单、轮播图和模态框等。这些组件都基于HTML5和CSS3，通过预定义的类名，开发者可以快速构建美观的用户界面。 ...
Bootstrap-datetimepicker年月日时分秒均可选择
11-22
Bootstrap-datetimepicker是一款基于Bootstrap框架的日期时间选择插件，它允许用户方便地选择精确到秒的时间和日期。这个插件极大地增强了Bootstrap原有基础组件的功能，使得开发者在构建交互式Web应用时，能够提供...
Bootstrap——网格布局
NanChen的博客
09-02 1005
什么是网格？ 网格布局的列数最多可以分为12列 如果要列数大于12则会另起一行补齐多余的列数 如果份数相加小于12则会铺不满整个宽度 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...
Bootstrap 3 主要css样式（class）一览
张景源的博客
11-07 6564
排版 .container//一个容器，宽度为“12” .container-fluid//充满窗口的容器 .row//行 .col-xs-*//宽度为*的列（手机屏幕） .col-sm-*//宽度为*的列（平板屏幕） .col-md-*//宽度为*的列（中等屏幕） .col-lg-*//宽度为*的列（大屏幕） .col-md-offset-*//列向右侧偏移* .col-md-push-3//列...
BOOTSTRAP 基本样式 - 栅格布局
gzxiaomei的博客
07-02 497
步骤 1 : 栅格系统 运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。 运用Bootstrap的栅格系统，首选需要准备一个class=container的div 紧接着需要一个class=row的 div，表示行 再挨着的div，就是列了。 Bootstrap的栅格系统会默认把一行，分成12列。 步骤 2 : 一半，1/3， 1/4 根据栅格系统的规划，要实现一半，1/3,1/4的布局，就很容易实现了。 步骤 3 : 自动换行 当同一行
bootstrap4 常用样式类名 （供自己参考）
weixin_30522183的博客
04-04 760
1、容器和网格系统 容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色字体 text-muted 柔和 text-primary ...
分离出的bootstrap的栅格样式
xuanwuziyou的专栏
11-02 969
分离出的bootstrap的栅格样式，直接引用到html页面就可使用，不需要bootstarp的js和jquery。 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/boot
**bootstrap常见常用样式总结
weixin_34175509的博客
05-20 155
1、水平居中 用.text-center 类如何联系我：【万里虎】www.bravetiger.cn 【QQ】3396726884 （咨询问题100元起，帮助解决问题500元起） 【博客】http://www.cnblogs.com/kenshinobiy/ ...
BootStrap
weixin_52397329的博客
11-24 289
BootStrap 主要内容 BootStrap的安装和使用 BootStrap 介绍 ​ 官网：http://getbootstrap.com/ ​ 中文网：http://www.bootcss.com/ ​ Bootstrap 是一套现成的 CSS 样式集合（做得还是很友好的）。是两个推特的员工干出来的。 ​ Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 ​ 2011年，twitter 的"一小撮"工程师为了提高他们内部的分析和
bootstrap学习笔记--bootstrap排版类的使用
abn1122的博客
01-06 150
标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式，这个和一般的html没啥区别。请看下面的实例： <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>...
Bootstrap 基本样式-栅格布局
litengbin的博客
01-19 1887
用来做自适应的，当屏幕宽度不一样的时候，会自动分成不同的等分 栅格系统 运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。 运用Bootstrap的栅格系统，首选需要准备一个class=container的div 紧接着需要一个class=row的 div，表示行 再挨着的div，就是列了。 Bootstrap的栅格系
现有一段bootstrap代码： <!--/.direct-chat-messages--> <div class="direct-chat-red col-md-12 mx-1.5"> <!-- /.card-header --> <!-- Message to the right --> <div class="direct-chat-msg right"> <!--简头向右--> <div class="direct-chat-infos clearfix"> @* <span class="direct-chat-name float-left">评价</span> <!--左上文字--> *@ @* <span class="direct-chat-timestamp float-Right">23 Jan 2:05 pm</span> <!--右上文字--> *@ <div class="text-right"> <input type="submit" id="btpj" value="评价" class="btn btn-dark btn-sm" /> </div> </div> <!-- /.direct-chat-infos --> <!-- /.direct-chat-img --> <div class="direct-chat-text form-control" id="tit"> <!--评级显示--> </div> </div> </div> 但是当前的按钮submit却不在这个元素的红色范围内，如何让其重叠到元素内右置
05-29
你可以将按钮放在 `direct-chat-infos` 元素中，并设置 `text-right` 类，这样按钮就会被右对齐并覆盖在消息框的右侧。代码如下： ```html <!--/.direct-chat-messages--> <div class="direct-chat-red col-md-12 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值