第六十篇前端框架Bootstrap-全局 CSS 样式

最新推荐文章于 2022-05-03 16:42:21 发布

Laughing@me

最新推荐文章于 2022-05-03 16:42:21 发布

阅读量316

点赞数

分类专栏： web develop 文章标签： bootstrap css

本文链接：https://blog.csdn.net/qq_45503700/article/details/104641011

版权

web develop 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

心得：请你一定要自信，你就是一道风景，没必要在别人的风景里仰视。

一、简介

下载网址：https://v3.bootcss.com/
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

1.原理

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%
宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

2.栅格参数 在这里插入图片描述
3.多种设备组合排布

<div class="col-xs-6 col-sm-3 col-md-6 col-lg-9" >..</div>

这个例子我们提供了4 中不同的列布局，分别适用于四种设备。在手机上，它将是左边 50% 右边 50% 的布局。在平板电脑上，它将是 25%/75% 的布局。在中型设备上，它将是50%/50%的布局。在大型视口的设备上，它将是75%/25% 的布局。

4.列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

在这里插入图片描述

二、排版

1.对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

在这里插入图片描述
2.大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>  首字母大写

3.列表

无样式列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表，在同一行显示

<ul class="list-inline">
  <li>...</li>
</ul>

三、表格

1.基本实例
.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

<table class="table">
  ...
</table>

2.条纹状表格
.table-striped 类可以给之内的每一行增加斑马条纹样式

<table class="table table-striped">
  ...
</table>

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

<table class="table table-bordered">
  ...
</table>

4.鼠标悬停
.table-hover 类可以让中的每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

5.状态类
通过这些状态类可以为行或单元格设置颜色
在这里插入图片描述

四、表单

1.基本表单(垂直表单)

向父元素添加 role=“form”，role属性代表的是扮演的角色为form，有些特定的插件会辨认role属性。
把标签和控件放在一个带有 class .form-group 的
中。这是获取最佳间距所必需的。
向所有的文本元素、和添加 class .form-control。

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

在这里插入图片描述
2.内联表单
为元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件

<div class="container">
        <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
        </div>
        <button type="submit" class="btn btn-default" style="margin-top: 24px;">Send invitation</button>
    </form>
    </div>

在这里插入图片描述
3.水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局

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

在这里插入图片描述
4.多选和单选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

4.1 垂直：

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

在这里插入图片描述
4.2 内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

在这里插入图片描述
5.下拉列表（select）

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

6.禁用状态

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

7.只读状态

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

8.设置输入框高度

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

在这里插入图片描述
9.设置输入框宽度

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

在这里插入图片描述

五、按钮

1.可作为按钮的标签或元素
为 <a>、<button> 或<input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

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

在这里插入图片描述
2.预定义样式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

在这里插入图片描述
3.尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

4.链接a元素
可以为基于元素创建的按钮添加 .active 类。

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

5.禁用状态
为元素添加 disabled 属性，使其表现出禁用状态。

六、图片

改变图片的形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

在这里插入图片描述
具体css排版请参考bootstrap官网：
https://v3.bootcss.com/css/#helper-classes-screen-readers

Laughing@me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六十篇前端框架Bootstrap-全局 CSS 样式

心得：请你一定要自信，你就是一道风景，没必要在别人的风景里仰视。一、简介下载网址：https://v3.bootcss.com/Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。1.原理...
复制链接

扫一扫