bootstrap详解（CSS）

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量970 收藏 2
点赞数 1
分类专栏： css 文章标签： bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yichair/article/details/75340150
版权

1、引用

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

2、文档类型

需要是HTML5文档

<!DOCTYPE html>

3、移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4、布局容器

自己根据视口确定容器框的大小，并将容器框居中，一般框宽=1170px

<div class="container">
  ...
</div>

5、栅格系统

容器内一行分成12格，每行div的class=”row”,其中每个元素div占n格，则class=”col-md-n”

holder.js 自动生成一张图暂时占位

    <div class="container">
        <h1>你好</h1>
        <div class="row"><!--一行十二格，一个图片占4格-->
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
        </div>
        <div class="row"><!--一行十二格，一个图片占4格-->
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
        </div>
        <div class="row"><!--一行十二格，一个图片占4格-->
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
            <div class="col-md-3">
                <img src="holder.js/100%x200" alt="">
            </div>
        </div>
 </div>

col-lg-n:视口很大（）就开始折行
col-md-n:（建议）
col-sm-n:
col-xs-n:视口很小才开始折行

col-md-offset-n:元素左边空n个格子

若在一行包含的元素含有格子大于12个，则换行

6、排版

标题：.page-header
段落：.lead

表格：
.table:变表格有条纹
.table-bordered:变格子
.table-hover：鼠标放上

单元格样式：
.success :绿色
.active:灰色
.info:青色
.warning：黄色
.danger：红色

<table class="table table-bordered table-hover">
            <tr class="warning">
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
            <tr class="active">
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr class="success">
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr class="info">
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr class="danger">
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
      </table>
Yichair
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap全局 CSS样式
m12120426的博客
04-30 526
一、概览 HTML5 文档类型 Bootstrap使用到某些元素和css属性需要将页面设置为HTML5文档类型，在你项目中的每个页面都要参照下面的格式进行设置 移动设备优先 针对移动设备的样式融进了框架的每个角落，而不是增加一个额外的文件，为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=
bootstrap学习总结-css组件(三)
weixin_34419321的博客
06-06 110
今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在首页进行阅读。http://www.cnblogs.com/jtjds/ 一：导航组件 自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到js的插件，所以这里不在描述。 <!DOCTYPE h...
BootStrap CSS全局样式和表格样式源码解析
12-29
CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。 然后其他内容全部写在这个div标签中即可！ 例如: <!DOCTYPE html> <html> <head> <title>BootStrap基础入门</title> <meta charset=utf-8> <meta name=viewport content=width=
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 993
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
1-13. Bootstrap中CSS部分解读
淡泊以明志，宁静以致远
01-13 375
Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。 Bootstrap 确保移动端适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width 属性控制设备的宽度。假设您的网...
CSS - Bootstrap中的CSS类
seaalan的博客
12-26 189
排版类 .lead ------- 使段落突出显示 .small ------- 设定小文本 (设置为父文本的 85% 大小) .text-left ------- 设定文本左对齐 .text-center ------- 设定文本居中对齐 .text-right ------- 设定文本右对齐 .text-muted ------- 本行内容是减弱的 .text-primary ------- ...
Bootstrap 常用 CSS类
wuyujin1997的博客
05-19 329
列宽度(占用列数) col-大小-列数 col-md-offset-列数 列排序 col-md-push-列数 将列对象向左推指定的宽度(指定列数所占的宽度) col-md-pull-列数 将列对象向右拉指定的宽度 隐藏|显示 hidden-xs|sm|md|lg-列数 visible-xs|sm|md|lg-列数 从 version 3.2.0 开始，形如visible-*...
CSS&Bootstrap;
10-27
### CSS与Bootstrap详解 #### CSS概述 Cascading Style Sheets（层叠样式表），简称CSS，是一种用于定义HTML文档外观及格式的语言。它允许开发者控制网页的布局、颜色、字体等视觉特性，使得HTML文档更加灵活多变。...
Bootstrap布局方式详解
01-19
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。 3、渐进增强 随着屏幕大小的增加而添加元素。 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。如下图： 二、...
Bootstrap BootstrapDialog使用详解
08-31
你需要包含`bootstrap.min.css`，`bootstrap-dialog.css`，`jquery-1.11.1.min.js`，`bootstrap.min.js`以及`bootstrap-dialog.js`。这些文件确保了Bootstrap的基本样式和JavaScript功能，以及BootstrapDialog的特定...
bootstrap tutorial
最新发布
06-25
### Bootstrap 网格系统详解 Bootstrap 的网格系统是其核心特性之一，它允许开发者通过简单的 HTML 结构实现灵活的页面布局。网格系统基于一系列行（row）和列（column）的组合。 #### 什么是网格？ 网格是一种将...
Bootstrap3.3.7
11-17
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式。此zip文件是Bootstrap3.3.7资源文件，内含css/fonts/js
bootstrap-3.3.7-dist
07-25
前端bootstrap框架，官网下载bootstrap-3.3.7-dist压缩版本。
Bootstrap里的文件分别表示什么？都有什么用？
weixin_34248118的博客
02-24 534
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap.css文档整理--自用
nayi_224的博客
12-05 1186
文章目录bootstrap版本 3.3.7相关文件引用ButtonsTablesThumbnailsLabelsBadgesDropdown menusNavAlertList GroupPanel bootstrap版本 3.3.7 下载地址：https://v3.bootcss.com/getting-started/#download 相关文件引用 注意： theme.css并不在dis...
Bootstrap框架的css 规范（精简归纳）
AlexMYH的博客
05-15 3128
Bootstrap CSS编码规范 语法 用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。 为选择器分组时，将单独的选择器单独放在一行。 为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。 每条声明语句的 : 后应该插入一个空格。 为了获得更准确的错误报告，每条声明都应该独占一行。 所有声明语句都应当以分号结尾。最...
Bootstrap 快速入门之第一章 入门&全局CSS之概览&栅格系统
qq_61313896的博客
04-29 1136
一：概念 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
专研前端，探索后端
05-14 1733
Bootstrap简介： Bootstrap是Twitter（推特）开发的，目前最受欢迎的前端开源框架，基于jQuery用于开发HTML、CSS、JavaScript，简洁灵活，常用于开发响应式布局及移动端开发。其中文官方文档：http://www.bootcss.com 官网：http://getbootstrap.com 推荐网站：http://bootstrap.css88.com 下载bootstrap： 拿到bootstrap文件包的方式有很多种，例如：官网下载、npm(后面介绍完node可以
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值