Web前端—— Bootstrap 前端框架学习笔记

一、概述

  • Bootstrap 是基于 HTML、CSS、JavaScript 的简单灵活的 Web 前端开发框架
  • 好处:定义了很多 CSS 样式和 JS 插件,使用这些插件可以得到丰富的页面效果
  • 响应式布局:同一套页面可以兼容不同分辨率的设备

Bootstrap中文参考手册下载

1、Bootstrap源码下载

Bootstrap官网下载

Bootstrap免费下载

解压后:
Web前端—— Bootstrap 前端框架学习笔记_第1张图片

2、引入 Bootstrap


<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>主页title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jQuery/jquery-1.8.3.min.js">script>
    <script src="bootstrap/js/bootstrap.min.js">script> 
head>
<body>

body>
html>

Web前端—— Bootstrap 前端框架学习笔记_第2张图片

二、响应式布局

  • 同一套页面可以兼容不同分辨率的设备。

  • 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子

  • 步骤:

    1. 定义容器。相当于之前的table、
      • 容器分类:
        1. container:两边留白
        2. container-fluid:每一种设备都是100%宽度
    2. 定义行。相当于之前的tr 样式:row
    3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
      • 设备代号:
        1. xs:超小屏幕 手机 (<768px):col-xs-12
        2. sm:小屏幕 平板 (≥768px)
        3. md:中等屏幕 桌面显示器 (≥992px)
        4. lg:大屏幕 大桌面显示器 (≥1200px)
    • 注意:
      1. 一行中如果格子数目超过12,则超出部分自动换行。
      2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
      3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

例:


<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>主页title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jQuery/jquery-1.8.3.min.js">script>
    <script src="bootstrap/js/bootstrap.min.js">script> 
    <style type="text/css">
        .container-fluid, .container {
            height: 50px;
            border: 1px solid #000;
            background-color: gold;
        }
    style>
head>
<body>
<div class="container-fluid">流体容器div>
<br>
<br>
<br>
<div class="container">响应式容器div>
body>
html>

Web前端—— Bootstrap 前端框架学习笔记_第3张图片

三、bootstrap 栅格系统

bootstrap将页面横向分为12等分,按照12等分定义了适应不同宽度等分的样式类,这些样式类组成了一套响应式、移动设备优先的流式栅格系统:

1、col-lg- 大于1200排成一行,小于1200分别占一行
2、col-md- 大于992排成一行,小于992分别占一行
3、col-sm- 大于768排成一行,小于768分别占一行
4、col-xs- 始终排列成一行

例:


<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>主页title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jQuery/jquery-1.8.3.min.js">script>
    <script src="bootstrap/js/bootstrap.min.js">script> 
    <style>
        .inner {
            border: 1px solid red;
        }
    style>
head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-5 col-md-4 col-sm-2 inner">栅格div>
        <div class="col-lg-5  col-md-4 col-sm-2 inner">栅格div>
        <div class="col-lg-2  col-md-4 col-sm-8 inner">栅格div>
    div>
div>
body>
html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、按钮

1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组

例:


<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>主页title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jQuery/jquery-1.8.3.min.js">script>
    <script src="bootstrap/js/bootstrap.min.js">script> 
head>
<body>
<button type="submit" class="btn btn-default">Button 默认button>
<a class="btn btn-default" href="#">a 标签默认a>
<button class="btn btn-default" type="submit">按钮默认button>
<input class="btn btn-default" type="button" value="Input 按钮">
<input class="btn btn-default" type="submit" value="Submit按钮">
<br>
<br>
<br>
<button type="button" class="btn btn-primary">(首选项)Primarybutton>
<button type="button" class="btn btn-success">(成功)Successbutton>
<button type="button" class="btn btn-info">(一般信息)Infobutton>
<button type="button" class="btn btn-warning">(警告)Warningbutton>
<button type="button" class="btn btn-danger">(危险)Dangerbutton>
<button type="button" class="btn btn-link">(链接)Linkbutton>
body>
html>

Web前端—— Bootstrap 前端框架学习笔记_第4张图片

五、表单

1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式
10、input-group-btn 表单控件组物件为按钮的样式
11、form-group-lg 大尺寸表单
12、form-group-sm 小尺寸表单

你可能感兴趣的:(JavaScript)