bootstarp学习记录

子非鱼emma

于 2021-06-05 16:42:14 发布

阅读量75

点赞数

分类专栏： booystrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_38998319/article/details/117598587

版权

booystrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

布局

移动设备优先

1.为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

2.在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。 //没有感受到不能缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器

由于 padding 等属性的原因，这两种容器类不能互相嵌套

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

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统(总份数是12份)

从堆叠到水平排列

<div class="container">
  <div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-4</div>
  </div>
</div>

流式布局容器

中等大小占屏幕的8份

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">.col-md-8</div>//中等大小占屏幕的8份
     <div class="col-md-4">.col-md-4</div>中等大小占屏幕的4份
  </div>
</div>

移动设备和桌面屏幕

超小屏时占每个div占4份宽度,中屏时占6份宽度

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

手机、平板、桌面

超小屏一个div占12份 ,小屏时一个占6份,中屏一个占8份一个占4份

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

多余的列（column）将另起一行排列

表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单:

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件

一定要添加 `label` 标签

设置 .sr-only 类将其隐藏

按钮

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstarp学习记录

1.为了确保适当的绘制和触屏缩放，需要在<head>之中添加 viewport 元数据标签。<meta name="viewport" content="width=device-width, initial-scale=1">
复制链接

扫一扫