bootstrap-container 类

说明

 .container 类用于固定宽度并支持响应式布局的容器

示例

<!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 rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

    <!-- 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>
  	<div class="container">
    	    <h1>你好，世界！</h1>
        </div>

        <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>
  </body>
</html>

输出

时间： 2024-10-06 07:14:33

bootstrap-container 类的相关文章

bootstrap学习笔记--bootstrap排版类的使用

标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: 1 2 3 4 5 6 <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>测试5 h5</h5> <h6>测试6 h6</h6> 内联子标题如果需要

Bootstrap "row"类宽度超出问题

问题产生原因: 页面用Bootstrap的栅格系统来布局,类col-xs-*左右会有15px的padding,该类下有元素img希望顶边展示,这就需要给col-xs-*类添加额外的样式:padding:0px; 如此做后,该类底下若再有row类,会出现该元素宽度超出父元素宽度. 解决方法: 为后来的row类添加样式:100%: 示例代码: <div class="row"> <div class="col-xs-12" style="pa

C++中的标准容器类 container类

1.我们可以把一个文件存入一个string对象,使用string类不必担心内存分配,但是,如果是我们要把每一行分配给一个string,要知道有多少个string实例只有读完后才知道. 2.如果有某种“容器”对象,能够容纳所有的不同的对象,C++标准容器类,它是C++的一个重要的强大工具. 3.人们经常会把标准库中的”容器“和”算法“与被称为”STL“(标准模板类库)混淆.STL就是一个叫Alex的惠普员工自己写的C++库,只是比较系统和免费推广的很好而已,STL的代码从广义上讲分为三类:algo

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类

布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器.我们提供了两个作此用处的类.注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套. .container 类用于固定宽度并支持响应式布局的容器. 复制 <div class="container"> ... </div> .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器. 复制 <div class=&q

【bootstrap】.container与.container_fluid

.container与.container_fluid是bootstrap中的两种不同类型的外层容器,区别是: .container 类用于固定宽度并支持响应式布局的容器.不用你自己设宽度,通过<div class="col-md-6">...自适应屏幕 .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器.(导航栏用)

Bootstrap《第一篇》，关于container、jumbotron、row、col、text-center等的学习

一.关于引入bootstrap文件  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet"

Bootstrap学习记录-2.container和table

1. Container Bootstrap中容器类提供了2个类标识:container.container-fluid. 两者的区别在于: container:容器不止有15px的padding,还有一个随着浏览器宽度变化而变化的margin.container-fluid:只有固定的15px的padding. 因此,container类的自适应是通过修改margin的改变来完成的,而container-fluid类的百分百宽度是指在固定的15px的padding前提下宽度总是当前视窗的宽度.

bootstrap中的container与container-fluid的用法

使用过bootstrap的同学都知道,其container与container-fluid都是设置文本居中,但两者还是有很大的区别. 官方给出的解释是: .container 类用于固定宽度并支持响应式布局的容器. .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器. 二者之间的共同点为,两者都可以将高度设置成auto,即自动模式.最大的不同就是宽度的设定上. container根据屏幕宽度利用媒体查询,已经设定了固定的宽度,作用为阶段性的改变宽度,

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> <