BootStrap（一）

本是古典何须时尚 2022-06-07 09:25 204阅读 0赞

## BootStrap（一） ##

其实BootStrap的使用还是关于他的一些class的使用 基本的css如下:

**1.**首先container类 屏幕左右两段外间距是15px ,所用类 是 container ，container-fluid

**2.**栅栏格局 可以将网页分为12列  
每一行是一个row 对于每一个row 可用col-屏幕大小-所占栏数  
其中屏幕大小有xs 超小(手机) sm较小(平板) md中等(电脑) lg较大(大屏幕) 所用类有:row,col-x-x  
代码如下:

<div class="container">
            <div class="row">
                <div class="col-md-3">占3列</div>
                <div class="col-md-9">占9列</div>
            </div>
        </div>

**3.**排版 一些重新定义的标签  
h标签 ，small标签 strong标签，em标签，abbr缩写提示标签 ，address标签，blockquote标签，pre标签，code标签，kbd标签  
lead类 凸显段落

**4.**表格  
表格常用的类: table table-striped table-hover table-bordered  
对于每一个tr 又可以凸显颜色 带颜色的类 info ,success,warning,danger  
自适应表格的类 table-responsive

**5.**表单  
表单用到的类 form-inline , form-horizontal ,form-group , form-control , control-label , ckeck , radio  
表单中 input 的type 类型 有：text，password，datetime，datetime-local，date，month，time，week，number，email，url，search，tel和color。

**6.**按钮  
按钮常用到的类有btn btn-颜色 btn-大小

**7.**图片  
图片用到的类有 img-rounded img-circle img-thumbnail  
父标签中用img-responsive

**8.**辅助的类  
文本的 text-primary text-success text-warning text-muted  
text-danger text-info  
背景的 bg-primary bg-info bg-success bg-warning bg-danger  
其他浮动 pull-left pull-right center-block clearfix show  
hidden sr-only text-hide close caret

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap3 简介（一）

[http://www.runoob.com/bootstrap/bootstrap-grid-system.html][http_www.runoob.com_bootstr

素颜马尾好姑娘i/ 2023年10月18日 15:11/ 0 赞/ 120 阅读

相关 ( 一)bootstrap学习——初识bootstrap

bootstrap是一Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。bootstrap提供了优雅的html和css规范，它即是由动态css语言

小灰灰/ 2022年08月27日 03:28/ 0 赞/ 210 阅读

相关每日一bootstrap 表单

这一篇来到复习一下bootstrap的表单，表单还是比较重要的一部分，学好表单还是很重要的。表单有几点还是要注意的，一个是label虽然在网页上没什么太多效果，但对于鼠标用

快来打我*/ 2022年08月21日 04:58/ 0 赞/ 159 阅读

相关每日一bootstrap 表格

表格so easy的。今天复习起来还是蛮快的一会就敲完了~~敲完就可以干别的事了表格只要记住原来的HTML格式，那就是加几个class的事情，非常容易代码用到了上一

拼搏现实的明天。/ 2022年08月21日 03:06/ 0 赞/ 169 阅读

相关每日一bootstrap 栅格

最近写bootstrap少了，老是忘记，所以决定每天从基础开始一点点敲敲，bootstrap很好学，看着官网的API都敲一遍就会了一下都是我的一下体会什么的，希望可以帮到

Bertha 。/ 2022年08月21日 02:08/ 0 赞/ 184 阅读

相关每日一bootstrap 按钮

按钮是网页上常见的一个标签，所以复习下按钮的样式。首先要知道的是，在bootstrap中 a button input都可以赋予按钮样式，a标签需要注意有些地方的使用

左手的ㄟ右手/ 2022年07月29日 09:16/ 0 赞/ 182 阅读

相关 BootStrap（一）

BootStrap（一）其实BootStrap的使用还是关于他的一些class的使用基本的css如下: 1.首先container类屏幕左右两段外间距是15px

本是古典何须时尚/ 2022年06月07日 09:25/ 0 赞/ 205 阅读

相关 Bootstrap学习笔记（一）入门

1、什么是响应式网页响应式网页/自适应网页（适应各种设备）：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。 2、响应式网页的三个特征： (1)流式

刺骨的言语ヽ痛彻心扉/ 2022年04月13日 09:39/ 0 赞/ 466 阅读

相关 Bootstrap 学习（一）入门

一：什么是Bootstrap？ Bootstrap是目前留下的前端框架之一，具备已下特点：基于HTML、CSS、JavaScript开发的；样式展现方面

爱被打了一巴掌/ 2022年02月21日 10:07/ 0 赞/ 298 阅读

相关 Bootstrap笔记【一】

【一】简介 1、什么是Bootstrap? Bootstrap是一个用于快速开发web应用程序的和网站的前端框架。 Bootstrap是基于HTML、CSS、Java

水深无声/ 2021年09月17日 02:46/ 0 赞/ 400 阅读