BOOTSTRAP Bootstrap简介

最新推荐文章于 2024-04-27 23:07:09 发布

Estom_yin

最新推荐文章于 2024-04-27 23:07:09 发布

阅读量548

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 容器 CSS

本文链接：https://blog.csdn.net/Estom_yin/article/details/52021262

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

>简介

>>快速开发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>

Estom_yin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
**BOOTSTRAP** Bootstrap简介

>简介>>快速开发web应用程序和网站的前端框架，包括基本框架、css、bootstrap布局组件、插件>>特点开源、功能强大的内置组件，易于定制。为开发人员穿件接口提供了一个简介统一的解决方案响应式设计，响应式css能够自适应于台式机、平板电脑和手机。每次使用调用jquery.js bootstrape.min.css bootstrape.min.js
复制链接

扫一扫