zoukankan      html  css  js  c++  java
  • 前端之bootstrap

    简介

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目

    jQuery导入

    Bootstrap它是基于jQuery,也就意味着你在用bootstrap要先导入jQuery文件

    导入jQuery方式有两种,这里采用CDN方式导入

    百度bootcdn进入这个界面并点击红色框

    然后选择3.4.1版本里的相关js文件

    布局容器

    <div class="container "></div> 左右有固定留白
    <div class="container-fluid c1"></div> 全屏展示

    栅格系统

    一个row就表示一行(这一行默认给你均分成了12份,每一份你还可以均分成12份)

    首先使用bootstrap先写一个布局容器
    <div class='container'></div>         #留白
    <div class='container-fluid'></div>


    <div class="container">
    <div class="row"> 一行
    <div class="col-md-6 c1"></div> 控制你占当前行的多少列
    <!--借助谷歌浏览器自动切换手机或电脑屏幕,只需要加一个col-xs-6生成对应的布局-->
    列偏移
    col-md-offset-3

    浮动
    pull-left
    pull-right

    表格

    <table class="table table-hover table-bordered table-striped">

    按钮
    <button class="btn btn-success">button</button>
    <button class="btn btn-info">button</button>
    <button class="btn btn-warning">button</button>
    <button class="btn btn-danger">button</button>
    <button class="btn btn-primary">button</button>
    <a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>  #把a标签附上button属性

    图标

  • 相关阅读:
    android 的通知管理
    java 反射机制
    java基础知识梳理
    spring 知识梳理
    Orange's_1_win7下搭建环境
    编写安全代码:死循环
    我的kindle书单
    [更新Github地址]python学习,自己写了个简单聊天工具mychat
    给VIM和Terminal配色:Solarized
    Hive学习之路 (八)Hive中文乱码
  • 原文地址:https://www.cnblogs.com/zhangdajin/p/10976722.html
Copyright © 2011-2022 走看看