您的位置：首页 > Web前端 > BootStrap

**BOOTSTRAP** Bootstrap简介

2016-07-25 10:26 363 查看
>简介

>>快速开发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 src = "..." class = "img-responsice" alt = "响应式图像">

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 class = "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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap 容器 CSS
相关文章推荐
新的分享
章节导航