[Web 前端] 031 bootstrap 的使用和全局 css 样式

分类：Bootstrap作者：编程之家用户

目录

0. 前言

  • 官方有 中文文档，写得十分详细
  • 我这里只是把公开课上提到的尽可能地列举一遍，列举的资料也源自 中文官网

1. 基本模板

  • 这就是一个最简单的 Bootstrap 页面，记为 code1
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 下载后可以换成相对路径 -->

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1> <!-- 字体做了一定的美化 -->
    <!-- (1) 下文的代码，写在此处 -->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

2. 布局容器

  • 代码写在 code1 的 (1) 处

2.1 container

  • 默认居中
  • 有固定的宽度
  • 支持响应式布局
<div class="container" style="height:100px;background:red">
      container
</div>

2.2 container-fluid

  • 宽度为 100%
  • 占据全部视口(viewport)
<div class="container-fluid" style="height:100px;background:green">
      container-fluid
</div>

3. 栅格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12 列
  • 它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局

3.1 简介

  • 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

3.2 栅格参数

  • 通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的
超小屏幕
手机 (<768px)		 小屏幕
平板 (≥768px)		 中等屏幕
桌面显示器 (≥992px)		 大屏幕
大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，
大于阈值时将变为水平排列C
.container
最大宽度		 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
column
列数		 12
最大列宽 自动 ~62px ~81px ~97px
gutter
槽宽		 30px
（每列左右均有 15px）
可嵌套 是
Offsets
偏移		 是
列排序 是

3.3 实例：从堆叠到水平排列

  • 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列
  • 所有“列(column)必须放在 ” .row 内
  • 下表是为了模拟排列情况；因为 col-md-1 有些长，所以我用 cm-1 作了代替
从堆叠到水平排列
cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1 cm-1
col-md-8 col-md-4
col-md-4 col-md-4 col-md-4
col-md-6 col-md-6
  • 举例：下面是三列布局的一种
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-1 col-sm-6" style="background:coral">col-md-3</div>
        <div class="col-md-6 col-xs-1 col-sm-3" style="background:rosybrown">col-md-6</div>
        <div class="col-md-3 col-xs-1 col-sm-3" style="background:dimgray">col-md-3</div>
    </div>
</div>

2.4 移动设备和桌面屏幕

  • 屏幕会根据实际大小显示设定的大小
  • 可以在调整浏览器大小查看效果

2.5 列偏移

  • 少废话，上例子
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-offset-2" style="background:#659">col-md-4</div>
        <div class="col-md-4" style="background:red">col-md-4</div>
        <div class="col-md-4" style="background:pink">col-md-4</div>
    </div>
</div>

2.6 嵌套列

  • 少废话，上例子
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6" style="background:red;height:40px">
            <div class="row">
                <div class="col-md-6" style="background:blue;height:20px"></div>
            </div>
        </div>
    <div class="col-md-6" style="background:pink;height:40px"></div>
    </div>
</div>

2.7 其他

  • 一行排列
  • 列排序
  • 等

4. 响应式工具

  • 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容；另外还包含了针对打印机显示或隐藏内容的工具类
  • 有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本；相反，通过使用这些工具类可以在不同设备上提供不同的展现形式

4.1 可用的类

  • 通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容
超小屏幕手机
(<768px)		 小屏幕平板
(≥768px)		 中等屏幕桌面
(≥992px)		 大屏幕桌面
(≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
  • 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：
类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
  • 因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block
  • .visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在；但是从 v3.2.0 版本开始不再建议使用；除了 <table> 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同

5. 排版

5.1 标题

  • HTML 中的所有标题标签，<h1> 到 <h6> 均可使用
  • 另外，还提供了 .h1 到 .h6 类，为的是给内联(inline)属性的文本赋予标题的样式
  • 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题
  • 少废话，上例子
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<p class="h1 text-center">h1. Bootstrap <small>heading</small></p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

5.2 其他

  • 内联文本元素
  • 对齐
  • 改变大小写
  • 缩略语
  • 地址
  • 引用
  • 列表
  • 等

6. 表格

6.1 基本实例

  • 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线
  • 这种方式看起来很多余！？但是官方觉得，表格元素使用的很广泛，如果他们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以他们选择将此样式独立出来

6.2 举例

<!--
    table-striped   条纹状表格
    table-bordered  带边框的表格
    table-hover     鼠标悬停
    table-condensed 紧缩表格
-->
<table class="table table-striped table-bordered table-hover table-condensed">
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>nan</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Lisi</td>
        <td>nan</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Wangwu</td>
        <td>nan</td>
    </tr>
</table>

6.3 其他

  • 条纹状表格
  • 带边框的表格
  • 紧缩表格
  • 状态类
  • 响应式表格

7. 表单

7.1 基本实例

  • 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
  • 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列
  • 少废话，上例子
<input type="text" class="form-control">

7.2 其他

  • 内联表单
  • 水平排列的表单
  • 下拉列表(select)
  • 静态控件
  • 焦点状态
  • 禁用状态
  • 只读状态
  • 校验状态
  • 等

原文地址：https://www.cnblogs.com/yorkyu/p/11734797.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义按钮的样式。<buttontype="button"class="btn">基本
Python学习-day52-bootstrap
起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.js"></script>屏幕
bootstrap 模态框
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><head><metacharset="utf-8"><title>模态框<itle><linkrel=&quo
BootStrap图片样式
图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居
bootstrap日期选择
<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name="start_time"> $(".datepicke
bootstrap-treeview 使用小记
目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小记零、写在前面的话p.s.bootst
bootstrap 在django中的使用
  一、应用http://www.bootcss.com/进入bootstrap4或bootstrap3中文网，想要快速地将Bootstrap应用到你的项目中，有以下两种办法： 1、bootstrap可以在线引用，方法如下：A、CSS将引入Bootstrap样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。<!
第87节：Java中的Bootstrap基础与SQL入门
第87节：Java中的Bootstrap基础与SQL入门前言复习什么是JQ？:writelessdomore写更少的代码，做更多的事找出所有兄弟：$("div").siblings()基本过滤器：选择器：过滤器$("div:first"):first:找到第一个元素:last:找到最后一个元素:even:找出偶数索引:odd:找出奇叔索引
bootstrap表单
1.bootstrap表单（1）form声明一个表单域（2）form-inline内联表单域（3）form-horizontal水平排列表单域（4）form-group表单组、包括表单文字和表单控件（5）form-control文本输入框、下拉列表控件样式（6）checkboxcheck-inline多选框样式（7）radioradio-inline单选框样式（8）input-group表单控件组
bootstrap-validator基本使用
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>首页<itle><
算是立flag吧~~~看明天结果了~~~
嗯。。。以前做ssh。应该是stratusspringhibernate。 然后现在来了一个新的需求。 要用java，bootstrap，oracle，springboot，jquery，mybatis。 开始，我也挺心虚的，但是后来一看，，，其实本没有必要这么虚。。。毕竟。。。这些东西，写的有问题。。。问题在于没有逻辑。 bootstrap，j
BootStrap表格
表格基本实例为任意 <table> 标签添加 .table 类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
Bootstrap-查询按钮和重置按钮
1、问题背景   一般情况下，查询列表有查询条件、查询按钮和重置按钮，输入查询条件，点击查询按钮查询列表等数据；点击重置按钮会将查询条件恢复到原始状态 2、实现源码 <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>Bootstrap-查询按钮和重置按钮<
Bootstrap学习第一天笔记
Bootstrap简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootStrap！这是一个词，不是
bootstrap 菜单
1.bootstrap图片img-responsive声明响应式图片2.bootstrap字体图标通过字体代替图标，font文件夹需要和css文件夹在同一目录3.bootst导航条（1）navbar声明导航条（2）navbar-default声明默认的导航条样式（3）navbar-inverse声明反白的导航条样式（4）navbar-static-top去掉导航条的圆角（5）n
bootstrap布局实例
1.路径导航<!doctypehtml><html><head><metacharset="utf-8"><title>路径导航<itle><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"><scripttype="text/ja
BootStrap中引用glyphicon图标无法显示【已解决】
问题描述：最近在学习BootStrap，过程中遇到引用glyphicon图标无法显示的问题，经过在百度后该问题已解决。1、首先看一下图标显示失败的页面：2、经过参考大佬们的经验，我找到了解决办法。首先我的BootStrap的css样式表是经过下载之后直接拷贝了其中一个文件到编译器中使用的，没有把所有
BootStrap系列：BootStrap布局
BootStrap布局一、BootStrap布局CSS组件主要包括栅格系统、列表组、进度条、icon图标、导航栏等组件。JavaScript插件主要有动画效果、窗体模式、下拉菜单、选项卡等二、网格系统Bootstrap内置了一套响应式、移动优先的流式栅格系统，随着屏幕设备或可视窗口（viewport）尺寸的
bootstrap-multiselect组件的使用
1引入所需要的文件2用法
bootstrap之table列内容超出部分省略号
想让bootstrap的table列内容超出部分省略号，要在table上加table-layout:fixed和word-break:break-all，然后在头部thead的th加上宽度百分比，最后在列里加个标签如span，在这个span加上单行超出部分省略号的css：display:inline-block，overflow:hidden，white-space:nowrap，text-overflow:e
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot