BOOTSTRAP Bootstrap简介

来源：互联网发布：2017淘宝双11活动规则编辑：程序博客网时间：2024/05/17 06:11

>简介

>>快速开发web应用程序和网站的前端框架，包括基本框架、css、bootstrap布局组件、插件

>>特点

开源、功能强大的内置组件，易于定制。

为开发人员穿件接口提供了一个简介统一的解决方案

响应式设计，响应式css能够自适应于台式机、平板电脑和手机。

每次使用调用jquery.js bootstrape.min.css bootstrape.min.js

>bootstrap css 概览

>>因为使用了H5元素和css属性，需要使用H5文档类型DOCTYPE

在文档的开头声明<!DOCTYPE html>

>>移动设备优先

在头部添加一下代码

<meta name = "viewport" content - "width=device-width, initial-scale=1.0">
width = device-width属性控制设备的宽度。设置成device-width可以确保他能正确的呈现在不同的设备上
initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何缩放。
user-scalable = no 设置viewport meta可以禁用其他缩放功能。
maxium-scale = 1.0最大缩放比例为1倍

>>响应式图像

img-responsive class可以图像对响应式布局更友好的支持

<span style="font-size:14px;">.img-responsive {  display: inline-block;  height: auto;  max-width: 100%;}</span>

>>全局显示

标签选择器，直接对body进行设计

<span style="font-size:14px;">body {  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: 14px;  line-height: 1.428571429;  color: #333333;  background-color: #ffffff;}</span>

>>排版

@font-family-base @font-size-base @line-height-base

>>链接样式

@line-color设置全局的颜色

<span style="font-size:14px;">a:hover,a:focus {  color: #2a6496;  text-decoration: underline;}a:focus {  outline: thin dotted #333;  outline: 5px auto -webkit-focus-ring-color;  outline-offset: -2px;}</span>

>>容器（container）

...

<div>

<span style="font-size:14px;">.container {   padding-right: 15px;   padding-left: 15px;   margin-right: auto;   margin-left: auto;}</span>

左右外边距由浏览器决定

<span style="font-size:14px;">.container {   padding-right: 15px;   padding-left: 15px;   margin-right: auto;   margin-left: auto;}</span>

0 0

**BOOTSTRAP** Bootstrap简介

BOOTSTRAP Bootstrap简介