BootStrap（一）

本是古典何须时尚 2022-06-07 09:25 184阅读 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 条评论，184人围观）

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

相关阅读

相关 Bootstrap3 简介（一）

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

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

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

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

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

相关每日一bootstrap 表格

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

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

相关每日一bootstrap 按钮

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

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

相关每天学点bootstrap(一)

什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT

深碍√TFBOYSˉ_/ 2022年07月17日 02:46/ 0 赞/ 158 阅读

相关 Bootstrap Table使用整理（一）

一、Bootstrap Table相关整理基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤

一时失言乱红尘/ 2022年06月14日 03:43/ 0 赞/ 265 阅读

相关 BootStrap（一）

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

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

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

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

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

相关 Bootstrap 学习（一）入门

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

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

相关 Bootstrap笔记【一】

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

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