python笔记(web前端 Bootstrap)

一、Bootstrap介绍

python笔记(web前端 Bootstrap)_第1张图片
python笔记(web前端 Bootstrap)_第2张图片
几个常用的网站:

  1. 下载插件:http://www.bootcdn.cn
  2. 图标:http://fontawesome.com/v4.7.0
  3. Bootstrap使用:http://www.bootcss.com/

二、基本使用的方法

  1. 支持移动端

    head标签加:
    

python笔记(web前端 Bootstrap)_第3张图片

  1. Normalize.css(初始化页面)
    为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas GallagherJonathan Neal维护的一个CSS 重置样式库。

  2. 样式类
    1、栅格系统(必须包含在container中)

    1.每一行均分十二列
    2.每一个人标签可以自定义占的列数 :`col-x-xx`(x代表不同设备[lg,md,sm,xs] xx代表占的列[1~12])
    3.只有列能作为行的直接子元素(列和行搭配着用)
    

    2、常用的样式

     表单等
    
  3. 常用的几个模板

    
    
    
        
        Bootstrap
        
        
        
        
    
    
    
    第一行
    占一列
    占十列
    占一列
    第二行左边空两列
    推3列
    第二行
    第三行

    h1. Bootstrap heading Secondary text

    h2. Bootstrap heading Secondary text

    h3. Bootstrap heading Secondary text

    h4. Bootstrap heading Secondary text

    h5. Bootstrap heading Secondary text
    h6. Bootstrap heading Secondary text

    字体突出

    高亮 显示 原价:110 插入文本 下画线 重点强调 斜体

    Left aligned text.

    Center aligned text.

    Right aligned text.

    Justified text.

    No wrap text.

    请登陆

    基本信息

    Example block-level help text here.

    45% Complete

登录页面展示
python笔记(web前端 Bootstrap)_第4张图片
信息采取页面展示
python笔记(web前端 Bootstrap)_第5张图片
模态框弹出页面展示
python笔记(web前端 Bootstrap)_第6张图片

你可能感兴趣的:(前端)