BootStrap是什么？BootStrap的结构组成介绍-tutorial js-php.cn

BootStrap是什么？BootStrap的结构组成介绍

不言

Lepaskan： 2018-10-13 16:08:12

ke hadapan

3347 orang telah melayarinya

本篇文章给大家带来的内容是关于BootStrap是什么？BootStrap由什么组成？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一. 简介

Bootstrap基于HTML,CSS,JAVASCRIPT的前端框架，预定义一套CSS样式和对应的jquery代码，最大的特点是采用响应式布局(兼容多个终端)，是因为他采用了媒体查询（css3 Media Query）（相关免费视频推荐：bootstrap教程）

二.BootStrap组成

1.12栅格系统：将屏幕分为12列，使用行来组织元素，然后将内容放在列内

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

Salin selepas log masuk

2.基础布局组件:bootstrap提供的多种基础布局组件

（1）引入

    <!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

Salin selepas log masuk

（2）默认样式的Table（ tr是一行,td是一行中的一列,th是标题列,可以等同于td）

 <table class="table">
   
 <th scope="row">1</th>

Salin selepas log masuk

（3）带边框的表格

 <table class="table-bordered">

Salin selepas log masuk

（4）表单

<form>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

Salin selepas log masuk

（5）按钮

  <button type="submit" class="btn btn-default">Submit</button>
  <button type="submit" class="btn btn-primary">Transfer cash</button>

Salin selepas log masuk

3.jquery：Bootstrap所有的JavaScript插件都依赖于Jquery的（注意引入jquery库）

4.css组件：bootstrap为我们预实现了很多CSS组件

5.javascript插件：bootstrap为我们提供了一些js插件

6.响应式设计：兼容多个终端

Atas ialah kandungan terperinci BootStrap是什么？BootStrap的结构组成介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

BootStrap是什么？BootStrap的结构组成介绍