锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

Bootstrap学习笔记

时间：2022-08-11 10:30:02 cn槽型连接器流体连接器组件

文章目录

  • 前言
    • Bootstrap学习
      • 1、Bootstrap简介
        • 1.1、使用模板
      • 2、容器布局
        • 2.1、固定容器（Container）
        • 2.2、流体容器（Container-fluid）
      • 3、栅格系统
        • 3.1、列排序
        • 3.2、列偏移
        • 3.3.格栅盒模型设计的精致之处
        • 3.4、总结
      • 4、常用样式
        • 4.1.1、标题
        • 4.1.2、段落
        • 4.2、强调
          • 4.2.1、文本颜色
          • 4.2.2、对齐效果
        • 4.3、列表
        • 4.4、代码
        • 4.5、表格
          • 4.5.1、表格样式
          • 4.5.2、tr、th、td样式
          • 4.5.3、代码演示
        • 4.6、表单
          • 4.6.1、表单控件
            • 4.6.1.1、输入框text
            • 4.6.1.2.下拉选择框select
            • 4.6.1.3、复选框checkbox
            • 4.6.1.4、单选框radio
            • 4.6.1.5、按钮
          • 4.6.2、表单布局
            • 4.6.2.1、水平表单
            • 4.6.2.2、内联表单
      • 4.7、缩略图
      • 4.8、面板
      • 5、BootStrap插件
        • 5.1、导航
          • 5.1.1.标签导航
          • 5.1.2.胶囊导航
        • 5.2、分页导航
        • 5.3、下拉菜单
        • 5.4、模态框
          • 5.4.1、用法
          • 5.4.2、实例

前言

提示:这是我看尚硅谷和优极限的时候Bootstrap视频再次结合W3shcool、菜鸟编程整理的学习笔记:

有了Bootstrap之后，写前端页面更方便！写页面不仅简单快捷，效果也是你用的。HTML、CSS、JS、JQuery很难写出来。学完这个，从后端开发者的角度来看，写的页面足以满足我的心意！

Bootstrap学习

1、Bootstrap简介

Bootstrap 用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上面发布的开源产品。

优点

  • 优先考虑移动设备：自 Bootstrap 3 框架包含了贯穿整个库的移动设备的优先款式。

  • 优先考虑移动设备：自 Bootstrap 3 框架包含了贯穿整个库的移动设备的优先款式。

  • 容易上手：只要您具备 HTML 和 CSS 你可以开始学习基础知识 Bootstrap。

  • 响应式设计：Bootstrap 的响应式 CSS 能够适应台式机、平板电脑和手机。有关响应设计详见 Bootstrap 响应设计。

  • 它为开发人员创建界面提供了简单统一的解决方案。

  • 它包含功能强大的内置组件，易于定制。

  • 它还提供了基础 Web 的定制。

  • 它是开源的。

基本内容

1.1、使用模板

使用下面给出的超级简单 HTML 模板，或修改。强烈建议您根据自己的需要修改这些例子，而不是简单地复制和粘贴。

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">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    
    
    
  head>
  <body>
    <h1>你好，世界！h1>

    
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script>
    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
  body>
html>

简洁模板：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap的HTML标准模板title>
  
  <link href="IntoBootstrap/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>Hello Boostraph1>

<script src="js/jquery-3.6.0.js">script>

<script src="IntoBootstrap/js/bootstrap.min.js">script>
body>
html>

实例模板：

DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局title>
    <link href="../dist/css/bootstrap.css" rel="stylesheet">
head>
<body>

body>
<script src="../js/jquery-3.6.0.js">script>
<script src="../dist/js/bootstrap.min.js">script>
html>

模板简单说明

  1. 引入bootstrap的CSS文件
  2. 如果使用它的jquery插件的话，要引入jquery

2、容器布局

2.1、固定容器（Container）

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

<div class="container">
  ...
div>
阈值 width/px
大于等于1200（lg 大屏 pc） 1170
大于等于992，小于1200 （md 中屏） 970
大于等于768，小于992 （sm 平板） 750
小于768 （xs 移动手机） auto

2.2、流体容器（Container-fluid）

用100%宽度，，占据全部视口(viewport)的容器

拓展：

  • width属性值为auto和100%是不一样的
    • 100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度
    • auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度

3、栅格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

移动设备优先策略

  • 内容
    • 决定什么是最重要的。
  • 布局
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

代码演示

DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>栅格系统title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style> .container{ 
           background-color: yellow; } div[class|=col]{ 
           border: 1px solid; height: 50px; } style>
head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-8">div>
        <div class="col-lg-6 col-md-4">div>
    div>
    <div class="row">
        <div class="col-lg-8">div>
        <div class="col-lg-4">div>
    div>
    <div class="row">
        <div class="col-lg-4">div>
        <div class="col-lg-4">div>
    div>
div>
body>
<script src="../js/jquery-3.6.0.js">script>
<script src="../dist/js/bootstrap.js">script>
html>

实例—缩略图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=none">
    <title>缩略图title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.css">
    <style> h3,p{ 
           text-align: center; } a{ 
           text-decoration: none; } a:hover{ 
           text-decoration: none; } style>
head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, Thumbnails!h1>
        <p>这是一个略缩图的实例。p>
    div>
    <div class="row">
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/aliyun.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">阿里云a>h3>
                    <p>无影云桌面p>
                    阿里云-全球领先的云计算及人工智能公司。阿里云最全特惠活动聚集于此！
                div>
            div>
        div>
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/webpack.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">Webpacka>h3>
                    <p>是前端资源模块化管理和打包工具p>
                    Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将模块按照依赖打包成前端资源。
                div>
            div>
        div>
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/react.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">Reacta>h3>
                    <p>用于构建用户界面的 JavaScript 框架p>
                    React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
                div>
            div>
        div>
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/bootstrap.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">优站精选a>h3>
                    <p>Bootstrap 网站实例p>
                    Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                div>
            div>
        div>
    div>
div>
body>
<script src="../../js/jquery-3.6.0.js">script>
<script src="../../dist/js/bootstrap.js">script>
html>

3.1、列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序

<div class="container">
    <h1>Hello, world!h1>
    <div class="row">
        <p>
            排序前
        p>
        <div class="col-md-4" style="background-color: #dedef8

相关文章