UX UI Bootstrap Designer

Ultra-v4 Extended Bootstrap Designer Nguyen Van Chau - tele@qnhcm Donate-more custom:paypal vanchau231@gmail.com Mô tả (Tiếng Việt) Ultra-v4 Extended Bootstrap Designer là một extension dành cho VS Code giúp bạn tạo giao diện web Bootstrap một cách trực quan. Với extension này, bạn có thể:

Kéo thả component: Chọn đối tượng từ Toolbox và kéo thả lên Canvas. Chỉnh sửa 150-200 thuộc tính CSS: Tùy chỉnh các thuộc tính CSS (box model, flexbox, grid, typography, màu sắc, background, …) trực tiếp thông qua Inspector. Chèn HTML: Chọn đối tượng, sau đó di chuyển con trỏ chuột đến vị trí cần chèn trong tệp HTML đang mở. Khi nhấp Export, HTML của giao diện sẽ được chèn vào vị trí con trỏ đó. Xuất CSS riêng biệt: CSS được xuất ra dựa trên các thuộc tính đã chỉnh sửa (theo class và nếu có custom ID) và được liệt kê trong một tệp CSS riêng. Sử dụng snippet: Lưu và tái sử dụng các đoạn mã HTML/CSS để tăng tốc quá trình phát triển. Reset Canvas & Xoá Component: Dễ dàng reset toàn bộ Canvas hoặc xoá từng phần tử khi cần. Cách Sử Dụng Mở Extension:

Mở Command Palette (Ctrl+Shift+P hoặc Cmd+Shift+P trên macOS) và chạy lệnh: Ultra v4 Extended Bootstrap Designer: Open. Kéo Thả Component:

Chọn một component từ Toolbox. Kéo thả component đó vào Canvas để xây dựng giao diện theo ý muốn. Chỉnh Sửa Thuộc Tính CSS:

Click chọn một phần tử trên Canvas để hiển thị Inspector. Chỉnh sửa các thuộc tính CSS qua các input tương ứng. Nếu cần, thay đổi ID (custom ID) hoặc chỉnh sửa class. (Mặc định, các style được lưu theo class, và nếu có custom ID thì sẽ xuất riêng theo ID.) Chèn HTML Vào Tệp Mở:

Trong VS Code, chọn vị trí trong tệp HTML nơi bạn muốn chèn giao diện. Nhấp chuột tại vị trí đó để đặt con trỏ. Khi nhấn nút Export, HTML của giao diện sẽ được chèn vào vị trí con trỏ hiện hành trong tệp HTML. Xuất CSS Riêng:

Khi nhấn Export, CSS của giao diện sẽ được tạo ra từ các store (classStore và idStore) và hiển thị trong một tệp CSS riêng. Bạn có thể sao chép nội dung CSS đó sang file .css riêng hoặc mở tệp CSS bên cạnh tệp HTML. Reset Canvas & Xoá Component:

Sử dụng nút “Reset Canvas” để xoá toàn bộ giao diện và bắt đầu lại. Sử dụng nút “Delete Selected” để xoá phần tử đang chọn. Description (English) Ultra-v4 Extended Bootstrap Designer is a VS Code extension that allows you to visually design Bootstrap-based web interfaces. With this extension, you can:

Drag and Drop Components: Select an element from the Toolbox and drag it onto the Canvas. Edit 150-200 CSS Properties: Directly modify CSS properties (box model, flexbox, grid, typography, colors, background, etc.) using the Inspector. Insert HTML into Open File: Select an element and then click at the desired insertion point in your currently open HTML file. When you click Export, the generated HTML layout will be inserted at the cursor’s position. Export CSS Separately: The CSS is generated based on the edited properties (stored by class and, if applicable, by custom ID) and is output to a separate CSS file. Utilize Code Snippets: Save and reuse HTML/CSS code snippets to speed up your development process. Reset Canvas & Delete Components: Easily reset the entire Canvas or delete individual elements as needed. How to Use Open the Extension:

Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS) and run: Ultra v4 Extended Bootstrap Designer: Open. Drag and Drop Components:

Select a component from the Toolbox. Drag and drop the component onto the Canvas to build your layout. Edit CSS Properties:

Click on an element on the Canvas to display the Inspector. Modify the CSS properties using the provided input fields. Optionally, update the element’s ID (custom ID) or edit its classes. (By default, styles are stored by class, and if a custom ID is set, they will also be output under that ID.) Insert HTML into Your Open File:

In VS Code, navigate to the location in your HTML file where you want the layout inserted. Click to place the cursor at that insertion point. When you click the Export button, the generated HTML layout will be inserted at the cursor’s position in the open HTML file. Export CSS Separately:

Upon clicking Export, the CSS for your layout is generated from the stored styles (classStore and idStore) and is output in a separate CSS file. You can then copy the CSS content into a .css file or open the CSS file side-by-side with your HTML file. Reset Canvas & Delete Components:

Use the “Reset Canvas” button to clear the entire layout and start over. Use the “Delete Selected” button to remove the currently selected element. Version & Publisher Name: ultra-v3-extended-bootstrap-designer Display Name: Ultra-v4 Extended Bootstrap Designer Version: 13.0.0 Publisher: Nguyen Van Chau - tele@qnhcm VS Code Engine: ^1.50.0 Cảm ơn bạn đã sử dụng Ultra-v4 Extended Bootstrap Designer. Nếu có thắc mắc hoặc góp ý, vui lòng liên hệ với publisher.

Thank you for using Ultra-v4 Extended Bootstrap Designer. If you have any questions or suggestions, please contact the publisher.